仿google自动提示.docx

资源描述

仿google自动提示.docx

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

仿google自动提示.docx

仿google自动提示

高仿googlesuggestajax示例

2009-08-17 文章来源：

浏览次数：

4950

前段时间想用googlesuggest在网上找了很多都不尽人意,于是自己花了些时间写了一个,跟googlesuggest基本一样,后面的约多少结果非本程序范围哦

需要修改的地方有

1.javascript.js

2.var url="ajax.asp"; //后台地址

3.var time_delayajax=300; //搜索延迟

4.var time_delayupdown=100; //方向键延迟

5.obj_div.style.top = （xtop + 20） + "px"; //20差不多是输入框的高度,请根据实际情况调整

6.ajax_xmlhttp.send（"sift_value="+escape（temp_value））; //提交到后台的值

8.dd=d+"约"+c[1]+"结果"+c[0]+"";//****li的显示

后台输出结果格式必需为'文本1,文本2'.....

'java,2''javascript,11''java示例,22'等

default.css

1..ajaxsearch {

2. width:

300px; //提示层的宽度

首页index.html

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

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

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

7.Google suggest高仿示例

10.

11.

20px 50px">

12.

298px;height:

18px" type="text" autocomplete="off" onBlur="blurdeal（）;" onKeyDown="keydowndeal（event）;" onFocus="focusdeal（event）;" />

13.

14.

15.

脚本javascript.js

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

2.var obj_div; //提示层对象

3.var obj_input; //输入框对象

4.var 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 url="ajax.asp"; //后台地址**********************************************************

19.var time_delayajax=300; //搜索延迟**********************************************************

20.var time_delayupdown=100; //方向键延迟********************************************************

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. ajax_xmlhttp= new ActiveXObject（'Microsoft.XMLHTTP'）;

30. }catch（e）{

31. try{

32. ajax_xmlhttp= new XMLHttpRequest（）;

33. }catch（e）{ajax_xmlhttp=null;}

34. }

35.}

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

37.function createajaxdiv（）{

38. var create_div = document.createElement（"div"）;

39. create_div.type = "div";

40. var 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 false;

48. var obj=obj_input;

49. var xtop=0;

50. var xleft=0;

51. while（obj）{

52. xtop += obj["offsetTop"];

53. xleft += obj["offsetLeft"];

54. obj = obj.offsetParent;

55. }

56. obj_div.style.left = xleft + "px";

57. obj_div.style.top = （xtop + 20） + "px"; //20差不多是输入框的高度,请根据实际情况调整************************************************************8

58. li_down=-1;

59.}

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

61.function hideajaxdiv（）{

62. obj_div.style.display="none";

63. li_down=-1;

64.}

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

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

66.function setlistyle（）{

67. for（var i=0;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. setfocus（）;

86. }

87.}

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

89.function downli（Fun_seletedlinum）{

90. if（!

obj_input）return false;

91. li_down=Fun_seletedlinum;

92. input_focus=true;

93.}

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

95.function upli（Fun_seletedlinum,Fun_event）{

96. if（!

obj_input）return false;

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

98. if（li_down!

=Fun_seletedlinum）{

99. li_down=-1;

100. return false;

101. }

102. clearTimeout（ajax_delay）;

103. clearTimeout（updown_delay）;

104. updown_run=true;

105. ajax_run=false;

106. ajax_run_ing=false;

107. li_num=-1;

108. div_word=null;

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. var r = obj_input.createTextRange（）;

120. r.moveStart（'character',obj_input.value.length）;

121. r.collapse（true）;

122. r.select（）;

123. }else{

124. obj_input.selectionStart=obj_input.value.length;

125. obj_input.focus（）;

126. }

127.}

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

129.function blurdeal（）{

130. if（input_focus==true）{

131. setfocus（）;

132. setTimeout（"setfocus（）"）;

133. return false;

134. }

135. updown_run=false;

136. ajax_run=false;

137. ajax_run_ing=false;

138. clearInterval（main_delay）;

139. clearTimeout（ajax_delay）;

140. clearTimeout（updown_delay）;

141. hideajaxdiv（）;

142. if（value_ed!

=obj_input.value）obj_div.innerHTML="";

143.}

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

145.function focusdeal（Fun_event）{

146. if（!

obj_div）createajaxdiv（）;

147. if（input_focus==true）{

148. input_focus=false;

149. return false;

150. }

151. var obj=（（window.event）?

Fun_event.srcElement:

Fun_event.target）;

152. if（obj.type!

="text"）return false;

153. updown_run=true;

154. ajax_run=true;

155. ajax_run_ing=false;

156. if（obj_input==obj && value_ed==obj.value && obj_div.innerHTML!

=""）{

157. obj_div.style.display="block";

158. removediv（）;

159. }else{

160. obj_input=obj;

161. value_ed=obj.value;

162. value_ing=obj.value;

163. value_unexit="";

164. li_num=-1;

165. li_down=-1;

166. div_word=null;

167. obj_div.innerHTML="";

168. removediv（）;

169. }

170. main_delay=setInterval（"mainajax（）",10）;

171.}

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

173.function mainajax（）{

174. if（value_ed==obj_input.value）return false;

175. if（value_unexit!

="" && （obj_input.value）.indexOf（value_unexit）==0）{hideajaxdiv（）;obj_div.innerHTML="";return false;}

176. if（value_ed!

=obj_input.value && ajax_run_ing==false）{

177. ajax_run=true;

178. value_ed=obj_input.value;

179. clearTimeout（ajax_delay）;

180. if（obj_input.value!

=""）{

181. ajax_delay=setTimeout（"getsearch（）;",time_delayajax）;

182. }else{

183. hideajaxdiv（）;

184. obj_div.innerHTML="";

185. ajax_run=false;

186. return false;

187.

188. }

189. }

190.}

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

192.function getsearch（）{

193. var temp_value=obj_input.value;

194. if（ajax_xmlhttp==null）{

195. return false;

196. }else if（ajax_xmlhttp.readyState!

=0）{

197. ajax_xmlhttp.abort（）;

198. ajax_run_ing=false;

199. }

200. ajax_xmlhttp.onreadystatechange=function（）{

201. if（ajax_run==false）{ajax_xmlhttp.abort（）;ajax_run_ing=false;return false;}

202. if（ajax_xmlhttp.readyState==4）{

203. obj_div.innerHTML="";

204. if（ajax_xmlhttp.status==200 || ajax_xmlhttp.status==304）{

205. var contant=ajax_xmlhttp.responseText;

206. if（contant!

="" && ajax_run==true）{

207. div_word=temp_value;

208. obj_div.innerHTML=resetcontant（contant）;

209. obj_div.style.display="block";

210. removediv（）;removediv（）;

211. }else{

212. hideajaxdiv（）;

213. }

214. updown_run=true;

215. ajax_run_ing=false;

216. li_num=-1;

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（"sift_value="+escape（temp_value））; //提交到后台的值*****************************************

225.}

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

227.function resetcontant（Fun_contant）{

228. if（Fun_contant==null || Fun_contant==""）return "";

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

230. if（Fun_contant==null || Fun_contant==""）return "";

231. var b=a.split（"''"）;

232. va