仿google自动提示文档格式.docx

仿google自动提示文档格式.docx

《仿google自动提示文档格式.docx》由会员分享，可在线阅读，更多相关《仿google自动提示文档格式.docx（13页珍藏版）》请在冰豆网上搜索。

后台输出结果格式必需为'

文本1,文本2'

.....

'

java,2'

javascript,11'

java示例,22'

等

default.css 

1..ajaxsearch 

{ 

2. 

width:

300px;

//提示层的宽度 

首页index.html

1.<

!

DOCTYPE 

html 

PUBLIC 

-//W3C//DTD 

XHTML 

1.0 

Transitional//EN"

http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

2.<

xmlns="

//www.w3.org/1999/xhtml"

3.<

head>

4.<

meta 

http-equiv="

Content-Type"

content="

text/html;

charset=utf-8"

/>

5.<

link 

rel="

stylesheet"

type="

text/css"

href="

default.css"

6.<

script 

language="

JavaScript"

src="

javascript.js"

text/javascript"

/script>

7.<

title>

Google 

suggest高仿示例<

/title>

8.<

/head>

9. 

10.<

body 

onResize="

removediv（）;

11.<

div 

style="

margin:

20px 

50px"

12.<

input 

298px;

height:

18px"

text"

autocomplete="

off"

onBlur="

blurdeal（）;

onKeyDown="

keydowndeal（event）;

onFocus="

focusdeal（event）;

13.<

/div>

14.<

/body>

15.<

/html>

脚本javascript.js

1.///////////////////////////////搜索提示框///////////////////////////////// 

obj_div;

//提示层对象 

obj_input;

//输入框对象 

main_delay;

//判断值变化延迟对象 

5.var 

ajax_delay;

//ajax延迟搜索对象 

6.var 

updown_delay;

//方向键延迟对象 

7.var 

ajax_xmlhttp;

//ajax对象 

8.var 

div_word=null;

//当前提示层对应的搜索值 

9.var 

li_num=-1;

//伪光标位置,提示层被选中的li序号,从0开始 

10.var 

li_down=-1;

//鼠标按下提示层的序号 

11.var 

value_ed="

//输入框延迟前的值 

12.var 

value_ing="

//输入框当前的值 

13.var 

value_unexit="

//搜索过没有结果的值开头 

14.var 

updown_run=false;

//允许方向键上下 

15.var 

ajax_run=false;

//true为正常进程,false停止ajax 

16.var 

ajax_run_ing=false;

//true正在运行,false空闲 

17.var 

input_focus=false;

//文本框焦点 

18.var 

//后台地址********************************************************** 

19.var 

//搜索延迟********************************************************** 

20.var 

//方向键延迟******************************************************** 

21. 

22.var 

$=function（Fun_id）{ 

23. 

return 

document.getElementById（Fun_id）;

24.} 

25.try{ 

26. 

ajax_xmlhttp= 

new 

ActiveXObject（'

Msxml2.XMLHTTP'

27.}catch（e）{ 

28. 

try{ 

29. 

Microsoft.XMLHTTP'

30. 

}catch（e）{ 

31. 

32. 

XMLHttpRequest（）;

33. 

}catch（e）{ajax_xmlhttp=null;

} 

34. 

35.} 

36.////////////////////////创建提示层//////////////////////// 

37.function 

createajaxdiv（）{ 

38. 

var 

create_div 

document.createElement（"

div"

39. 

create_div.type 

40. 

promptdiv 

document.body.appendChild（create_div）;

41. 

promptdiv.className 

ajaxsearch"

42. 

obj_div=promptdiv;

43.} 

44.////////////////////////设置提示层位置//////////////////////// 

45.function 

removediv（）{ 

46. 

if（!

obj_div 

|| 

obj_input）return 

false;

47. 

if（obj_div.style.display=="

none"

）return 

48. 

obj=obj_input;

49. 

xtop=0;

50. 

xleft=0;

51. 

while（obj）{ 

52. 

xtop 

+= 

obj["

offsetTop"

];

53. 

xleft 

offsetLeft"

54. 

obj 

obj.offsetParent;

55. 

56. 

obj_div.style.left 

57. 

obj_div.style.top 

//20差不多是输入框的高度,请根据实际情况调整************************************************************8 

58. 

59.} 

60.////////////////////////隐藏提示层//////////////////////// 

61.function 

hideajaxdiv（）{ 

62. 

obj_div.style.display="

63. 

64.} 

65.////////////////////////设置被选<

li>

css样式//////////////////////// 

66.function 

setlistyle（）{ 

67. 

for（var 

i=0;

i<

obj_div.firstChild.childNodes.length;

i++）{ 

68. 

obj_div.firstChild.childNodes[i].id="

69. 

70. 

if（li_num!

=-1）obj_div.firstChild.childNodes[li_num].id="

liseleted"

71.} 

72.////////////////////////鼠标经过提示层//////////////////////// 

73.function 

overli（Fun_seletedlinum）{ 

74. 

if（li_num==-1）value_ing=obj_input.value;

75. 

li_num=Fun_seletedlinum;

76. 

setlistyle（）;

77.} 

78.////////////////////////鼠标拖动提示层//////////////////////// 

79.function 

moveli（）{ 

80. 

if（window.getSelection）{ 

81. 

setfocus（）;

82. 

window.getSelection（）.removeAllRanges（）;

83. 

}else{ 

84. 

document.selection.empty（）;

85. 

86. 

87.} 

88.////////////////////////鼠标按下提示层//////////////////////// 

89.function 

downli（Fun_seletedlinum）{ 

90. 

91. 

li_down=Fun_seletedlinum;

92. 

input_focus=true;

93.} 

94.////////////////////////鼠标弹起提示层//////////////////////// 

95.function 

upli（Fun_seletedlinum,Fun_event）{ 

96. 

97. 

if（Fun_event.button==2）{li_down=-1;

return} 

98. 

if（li_down!

=Fun_seletedlinum）{ 

99. 

100. 

101. 

102. 

clearTimeout（ajax_delay）;

103. 

clearTimeout（updown_delay）;

104. 

updown_run=true;

105. 

106. 

107. 

108. 

109. 

110. 

value_ed=obj_div.firstChild.childNodes[Fun_seletedlinum].childNodes[1].nodeValue;

111. 

obj_input.value=value_ed;

112. 

value_ing=value_ed;

113. 

hideajaxdiv（）;

114. 

obj_div.innerHTML="

115.} 

116.////////////////////////设置文本框获取焦点/////////////////////// 

117.function 

setfocus（）{ 

118. 

if（window.event）{ 

119. 

r 

obj_input.createTextRange（）;

120. 

r.moveStart（'

character'

obj_input.value.length）;

121. 

r.collapse（true）;

122. 

r.select（）;

123. 

124. 

obj_input.selectionStart=obj_input.value.length;

125. 

obj_input.focus（）;

126. 

127.} 

128.////////////////////////文本框失去焦点//////////////////////// 

129.function 

blurdeal（）{ 

130. 

if（input_focus==true）{ 

131. 

132. 

setTimeout（"

setfocus（）"

133. 

134. 

135. 

136. 

137. 

138. 

clearInterval（main_delay）;

139. 

140. 

141. 

142. 

if（value_ed!

=obj_input.value）obj_div.innerHTML="

143.} 

144.////////////////////////文本框获取焦点//////////////////////// 

145.function 

focusdeal（Fun_event）{ 

146. 

obj_div）createajaxdiv（）;

147. 

148. 

149. 

150. 

151. 

obj=（（window.event）?

Fun_event.srcElement:

Fun_event.target）;

152. 

if（obj.type!

="

153. 

154. 

ajax_run=true;

155. 

156. 

if（obj_input==obj 

&

value_ed==obj.value 

obj_div.innerHTML!

）{ 

157. 

block"

158. 

159. 

160. 

obj_input=obj;

161. 

value_ed=obj.value;

162. 

value_ing=obj.value;

163. 

164. 

165. 

166. 

167. 

168. 

169. 

170. 

main_delay=setInterval（"

mainajax（）"

10）;

171.} 

172.////////////////////////主函数//////////////////////// 

173.function 

mainajax（）{ 

174. 

if（value_ed==obj_input.value）return 

175. 

if（value_unexit!

（obj_input.value）.indexOf（value_unexit）==0）{hideajaxdiv（）;

176. 

=obj_input.value 

ajax_run_ing==false）{ 

177. 

178. 

value_ed=obj_input.value;

179. 

180. 

if（obj_input.value!

181. 

ajax_delay=setTimeout（"

getsearch（）;

time_delayajax）;

182. 

183. 

184. 

185. 

186. 

187. 

188. 

} 

189. 

190.} 

191.////////////////////////获取搜索内容//////////////////////// 

192.function 

getsearch（）{ 

193. 

temp_value=obj_input.value;

194. 

if（ajax_xmlhttp==null）{ 

195. 

196. 

}else 

if（ajax_xmlhttp.readyState!

=0）{ 

197. 

ajax_xmlhttp.abort（）;

198. 

199. 

200. 

ajax_xmlhttp.onreadystatechange=function（）{ 

201. 

if（ajax_run==false）{ajax_xmlhttp.abort（）;

202. 

if（ajax_xmlhttp.readyState==4）{ 

203. 

204. 

if（ajax_xmlhttp.status==200 

ajax_xmlhttp.status==304）{ 

205. 

contant=ajax_xmlhttp.responseText;

206. 

if（contant!

ajax_run==true）{ 

207. 

div_word=temp_value;

208. 

obj_div.innerHTML=resetcontant（contant）;

209. 

210. 

211. 

212. 

213. 

214. 

215. 

216. 

217. 

if（contant=="

）value_unexit=temp_value;

218. 

219. 

220. 

221. 

ajax_xmlhttp.open（"

post"

url,true）;

222. 

ajax_xmlhttp.setRequestHeader（'

Content-type'

'

application/x-www-form-urlencoded'

223. 

ajax_run_ing=true;

224. 

ajax_xmlhttp.send（"

//提交到后台的值***************************************** 

225.} 

226.////////////////////////内容重组/////////////////////// 

227.function 

resetcontant（Fun_contant）{ 

228. 

if（Fun_contant==null 

Fun_contant=="

229. 

a=Fun_contant.substring（1,Fun_contant.length-1）;

230. 

231. 

b=a.split（"

232. 

va