仿google自动提示.doc

高仿google suggest ajax示例2009-08-17文章来源：浏览次数： 4950前段时间想用google suggest在网上找了很多都不尽人意,于是自己花了些时间写了一个,跟google suggest 基本一样,后面的约多少结果非本程序范围哦需要修改的地方有1. javascript.js 2. varurl=ajax.asp;/后台地址 3. vartime_delayajax=300;/搜索延迟 4. vartime_delayupdown=100;/方向键延迟 5. obj_div.style.top=(xtop+20)+px;/20差不多是输入框的高度,请根据实际情况调整 6. ajax_xmlhttp.send(sift_value=+escape(temp_value);/提交到后台的值 7. 8. dd=d+约+c1+结果+c0+;/*li的显示后台输出结果格式必需为文本1,文本2.java,2javascript,11java示例,22等default.css1. .ajaxsearch 2. width:300px;/提示层的宽度首页index.html1. 2. 3. 4. 5. 6. 7. Googlesuggest高仿示例8. 9. 10. 11. 12. 13. 14. 15. 脚本javascript.js1. /搜索提示框/ 2. varobj_div;/提示层对象 3. varobj_input;/输入框对象 4. varmain_delay;/判断值变化延迟对象 5. varajax_delay;/ajax延迟搜索对象 6. varupdown_delay;/方向键延迟对象 7. varajax_xmlhttp;/ajax对象 8. vardiv_word=null;/当前提示层对应的搜索值 9. varli_num=-1;/伪光标位置,提示层被选中的li序号,从0开始 10. varli_down=-1;/鼠标按下提示层的序号 11. varvalue_ed=;/输入框延迟前的值 12. varvalue_ing=;/输入框当前的值 13. varvalue_unexit=;/搜索过没有结果的值开头 14. varupdown_run=false;/允许方向键上下 15. varajax_run=false;/true为正常进程,false停止ajax 16. varajax_run_ing=false;/true正在运行,false空闲 17. varinput_focus=false;/文本框焦点 18. varurl=ajax.asp;/后台地址* 19. vartime_delayajax=300;/搜索延迟* 20. vartime_delayupdown=100;/方向键延迟* 21. 22. var$=function(Fun_id) 23. returndocument.getElementById(Fun_id); 24. 25. try 26. ajax_xmlhttp=newActiveXObject(Msxml2.XMLHTTP); 27. catch(e) 28. try 29. ajax_xmlhttp=newActiveXObject(Microsoft.XMLHTTP); 30. catch(e) 31. try 32. ajax_xmlhttp=newXMLHttpRequest(); 33. catch(e)ajax_xmlhttp=null; 34. 35. 36. /创建提示层/ 37. functioncreateajaxdiv() 38. varcreate_div=document.createElement(div); 39. create_div.type=div; 40. varpromptdiv=document.body.appendChild(create_div); 41. promptdiv.className=ajaxsearch; 42. obj_div=promptdiv; 43. 44. /设置提示层位置/ 45. functionremovediv() 46. if(!obj_div|!obj_input)returnfalse; 47. if(obj_div.style.display=none)returnfalse; 48. varobj=obj_input; 49. varxtop=0; 50. varxleft=0; 51. while(obj) 52. xtop+=objoffsetTop; 53. xleft+=objoffsetLeft; 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. functionhideajaxdiv() 62. obj_div.style.display=none; 63. li_down=-1; 64. 65. /设置被选css样式/ 66. functionsetlistyle() 67. for(vari=0;iobj_div.firstChild.childNodes.length;i+) 68. obj_div.firstChild.childNodesi.id=; 69. 70. if(li_num!=-1)obj_div.firstChild.childNodesli_num.id=liseleted; 71. 72. /鼠标经过提示层/ 73. functionoverli(Fun_seletedlinum) 74. if(li_num=-1)value_ing=obj_input.value; 75. li_num=Fun_seletedlinum; 76. setlistyle(); 77. 78. /鼠标拖动提示层/ 79. functionmoveli() 80. if(window.getSelection) 81. setfocus(); 82. window.getSelection().removeAllRanges(); 83. else 84. document.selection.empty(); 85. setfocus(); 86. 87. 88. /鼠标按下提示层/ 89. functiondownli(Fun_seletedlinum) 90. if(!obj_input)returnfalse; 91. li_down=Fun_seletedlinum; 92. input_focus=true; 93. 94. /鼠标弹起提示层/ 95. functionupli(Fun_seletedlinum,Fun_event) 96. if(!obj_input)returnfalse; 97. if(Fun_event.button=2)li_down=-1;return 98. if(li_down!=Fun_seletedlinum) 99. li_down=-1; 100. returnfalse; 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.childNodesFun_seletedlinum.childNodes1.nodeValue; 111. obj_input.value=value_ed; 112. value_ing=value_ed; 113. hideajaxdiv(); 114. obj_div.innerHTML=; 115. 116. /设置文本框获取焦点/ 117. functionsetfocus() 118. if(window.event) 119. varr=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. functionblurdeal() 130. if(input_focus=true) 131. setfocus(); 132. setTimeout(setfocus(); 133. returnfalse; 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. functionfocusdeal(Fun_event) 146. if(!obj_div)createajaxdiv(); 147. if(input_focus=true) 148. input_focus=false; 149. returnfalse; 150. 151. varobj=(window.event)?Fun_event.srcElement:Fun_event.target); 152. if(obj.type!=text)returnfalse; 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. functionmainajax() 174. if(value_ed=obj_input.value)returnfalse; 175. if(value_unexit!=&(obj_input.value).indexOf(value_unexit)=0)hideajaxdiv();obj_div.innerHTML=;returnfalse; 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. returnfalse; 187. 188. 189. 190. 191. /获取搜索内容/ 192. functiongetsearch() 193. vartemp_value=obj_input.value; 194. if(ajax_xmlhttp=null) 195. returnfalse; 196. elseif(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;returnfalse; 202. if(ajax_xmlhttp.readyState=4) 203. obj_div.innerHTML=; 204. if(ajax_xmlhttp.status=200|ajax_xmlhttp.status=304) 205. varcontant=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. functionresetcontant(Fun_contant) 228. if(Fun_contant=null|Fun_contant=)return; 229. vara=Fun_contant.substring(1,Fun_contant.length-1); 230. if(Fun_contant=null|Fun_contant=)return; 231. varb=a.split(); 232. varc; 233. vard; 234. d=; 235. for(variinb) 236. c=bi.split(,); 237. /* 238. d=d+约+c1+结果+c0+; 239. /* 240. 241. d=d+关闭242. d=d+; 243. returnd; 244. 245. /键盘事件/ 246. functionkeydowndeal(Fun_event) 247. varkeyc=(window.event)?Fun_event.keyCode:Fun_event.which); 248. if(keyc=13)hideajaxdiv();returnfalse; 249. if(keyc=27) 250. if(obj_div.style.display=block&li_num-1)value_ed=obj_input.value=value_ing; 251. hideajaxdiv(); 252. returnfalse; 253. 254. if(keyc=40|keyc=38) 255. if(div_word=obj_input.value&obj_div.style.display=none&obj_div.innerHTML!=) 256. obj_div.style.display=block; 257. removediv(); 258. returnfalse; 259. 260. if(li_num=-1) 261. if(div_word!=obj_input.value)returnfalse; 262. else 263. if(div_word!=value_ing)returnfalse; 264. 265. if(updown_run=false|ajax_run_ing=true|obj_div.style.display=none)returnfalse; 266. updown_delay=setTimeout(updownli(+keyc+),time_delay