当前位置：编程学习 > JS >>

ajax仿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";    //20差不多是输入框的高度,请根据实际情况调整  
  6. ajax_xmlhttp.send("sift_value="+escape(temp_value)); //提交到后台的值  
  7.  
  8. dd=d+"<li onmouseover="overli("+i+");" onmousedown="downli("+i+")" onmouseup="upli("+i+",event)" onmousemove="moveli();"><span>约"+c[1]+"结果</span>"+c[0]+"</li>";//****li的显示 

后台输出结果格式必需为'文本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. <html xmlns="http://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" type="text/javascript"></script> 
  7. <title>Google suggest高仿示例</title> 
  8. </head> 
  9.  
  10. <body onResize="removediv();"> 
  11. <div style="margin:20px 50px"> 
  12. <input style="width:298px;height:18px" type="text" autocomplete="off" onBlur="blurdeal();" onKeyDown="keydowndeal(event);" onFocus="focusdeal(event);" /> 
  13. </div> 
  14. </body> 
  15. </html> 

脚本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. ////////////////////////设置被选<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.   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.  var c;  
  233.  var d;  
  234.  d="<ul>";  
  235.  for(var i in b){  
  236.   c=b[i].split(",");  
  237.   //***************************************************************  
  238.   d=d+"<li onmouseover="overli("+i+");" onmousedown="downli("+i+")" onmouseup="upli("+i+",event)" onmousemove="moveli();"><span>约"+c[1]+"结果</span>"+c[0]+"</li>";  
  239.   //***************************************************************  
  240.  }  
  241.  d=d+"<li onmousedown="input_focus=true;li_down=-1;" onmouseup="li_down=-1" onmousemove="moveli();"><span><a class="shutajaxdiv" onclick="hideajaxdiv();">关闭</a></span></li>" 
  242.  d=d+"</ul>";  
  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(keyc==27){  
  250.   if(obj_div.style.display=="block" && li_num>-1)value_ed=obj_input.value=value_ing;  
  251.   hideajaxdiv();  
  252.   return false;  
  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.    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)return 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_run=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<obj_div.firstChild.childNodes.length-2){  
  283.    li_num++;  
  284.   }else{  
  285.    li_num=-1;  
  286.   }  
  287.  }  
  288.  if(Fun_key==38){  
  289.   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.childNodes[li_num].childNodes[1].nodeValue;  
  297.  }else{  
  298.   value_ed=obj_input.value=value_ing;  
  299.  }  
  300.  setlistyle();  
  301. } 

 后台ajax.asp

  1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001" %>  
  2. <%option explicit%>  
  3. <%Response.CodePage="65001"%>  
  4. <%Response.Charset="utf-8" %>  
  5. <!--#include file="conn.asp"-->  
  6. <%  
  7. dim Sift_value  
  8. dim Sql,Rs,I,Num  
  9. dim Contant  
  10. Contant="" 
  11. Num=10  
  12. Sift_value=replace(unescape(request.form("sift_value")),"""","""""")  
  13.  
  14. Sql="select top "&Num&" keyword,matchnum from search where keyword like """&Sift_value&"%"" order by id" 
  15.  
  16. set Rs=server.CreateObject("adodb.recordset")  
  17. Rs.open Sql,Conn,1,1  
  18. if not (Rs.eof and Rs.bof) then  
  19.  for I=0 to Num-1  
  20.   Contant=Contant&"'"&rs(0)&","&rs(1)&"'" 
  21.   Rs.movenext  
  22.   if Rs.eof then exit for  
  23.  next  
  24. end if  
  25. response.Write(Contant)  
  26. Rs.close  
  27. set Rs=nothing  
  28. %> 

 

补充：网页制作,js教程

上一个：Javascript函数类型的判断
下一个：ExtJS accordion布局

更多图片编程知识:
更多JS疑问解答：
几个验证11位手机号码格式的js代码
js如何获得FCKeditor控件的值
用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
JS验证，这块“牛皮”反复修改都不能实现
在JS中使用DOM模型
如何用JS 获取本地文件夹的文件列表
js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
求实现自动生成图片缩略图的JS代码
JS脚本网页问题
js，代码中"object"和"Object"区别？
js+flash实现网页图片切换效果，出现边框，单击激活此控件。
JS怎样操作PHP中的参数
js 怎么在一打开页面就加载这个函数。
Date.parse()的问题(js)
<script src="/{maxcms:sitepath}js/common.js"></script>是什么意思
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
如果你遇到编程学习难题：
请访问www.zzzyk.com 试试
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络，