仿google自动提示.docx
- 文档编号:7590701
- 上传时间:2023-01-25
- 格式:DOCX
- 页数:13
- 大小:20.48KB
仿google自动提示.docx
《仿google自动提示.docx》由会员分享,可在线阅读,更多相关《仿google自动提示.docx(13页珍藏版)》请在冰豆网上搜索。
仿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)); //提交到后台的值
7.
8.dd=d+"
后台输出结果格式必需为'文本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.
//www.w3.org/1999/xhtml">
3.
4.
5.
6.
7.
8.
9.
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.////////////////////////设置被选
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- google 自动 提示