《仿google自动提示》由会员分享，可在线阅读，更多相关《仿google自动提示（10页珍藏版）》请在金锄头文库上搜索。
1、高仿高仿 google suggest ajax 示例示例2009-08-17 文章来源： 浏览次数： 4950前段时间想用 google suggest 在网上找了很多都不尽人意,于是自己花了些时间写了一个,跟google suggest 基本一样,后面的约多少结果非本程序范围哦需要修改的地方有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“
2、; /20 差不多是输入框的高度,请根据实际情况调整 6.ajax_xmlhttp.send(“sift_value=“+escape(temp_value); /提交到后台的值 7. 8.dd=d+“约“+c1+“结果“+c0+“;/*li 的显示 后台输出结果格式必需为文本 1,文本 2.java,2javascript,11java 示例,22等default.css 1.ajaxsearch 2. width:300px; /提示层的宽度 首页 index.html1. 2. 3. 4. 5. 6. 7.Google suggest 高仿示例 8. 9. 10. 11. 12. 13.
3、 14. 15. 脚本 javascript.js1./搜索提示框/ 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; /鼠标
4、按下提示层的序号 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.v
5、ar 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. tr
6、y 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“;
7、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.
8、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“;
9、235. for(var i in b) 236. c=bi.split(“,“); 237. /* 238. d=d+“约“+c1+“结果“+c0+“; 239. /* 240. 241. d=d+“关闭“ 242. d=d+“; 243. return d; 244. 245./键盘事件/ 246.function keydowndeal(Fun_event) 247. var keyc=(window.event)?Fun_event.keyCode:Fun_event.which); 248. if(keyc=13)hideajaxdiv();return false; 249. if
10、(keyc=27) 250. if(obj_div.style.display=“block“ 251. hideajaxdiv(); 252. return false; 253. 254. if(keyc=40 | keyc=38) 255. if(div_word=obj_input.value 257. removediv(); 258. return false; 259. 260. if(li_num=-1) 261. if(div_word!=obj_input.value)return false; 262. else 263. if(div_word!=value_ing)r
11、eturn false; 264. 265. if(updown_run=false | ajax_run_ing=true | obj_div.style.display=“none“)return false; 266. updown_delay=setTimeout(“updownli(“+keyc+“)“,time_delayupdown); 267. updown_run=false; 268. 269. 270./方向键移动 li/ 271.function updownli(Fun_key) 272. if(!obj_div)return false; 273. updown_r
12、un=true; 274. if(li_num=-1) 275. if(div_word!=obj_input.value)hideajaxdiv();obj_div.innerHTML=“;li_num=-1;return false; 276. else 277. if(div_word!=value_ing)hideajaxdiv();obj_div.innerHTML=“;li_num=-1;return false; 278. 279. if(updown_run=false)return false; 280. if(li_num=-1)value_ing=value_ed; 281. if(Fun_key=40) 282. if(li_num=0) 290. li_num-; 291. else 292. li_num=obj_div.firstChild.childNodes.length-2; 293. 294. 295. if(li_num!=-1) 296. value_ed=obj_input.value=obj_div.firstChild.childNodesli_num.childNodes1.nodeValue; 297. else 298. value_ed=obj_input.value=value_ing; 299. 300. s
