一聚教程网：一个值得你收藏的教程网站

ps教程 | flash教程 | 路由器设置 | Jsp教程 | 加入收藏

PHP教程 Css教程 操作系统 数据库

首页 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
当前位置：一聚教程网 > 网页制作 > js教程

推荐专题

最新下载

热门教程

ajax仿google suggest

时间：2009-10-12 编辑：简简单单 来源：一聚教程网 

  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 

    css">
  1. .ajaxsearch {  
  2.  width:300px; //提示层的宽度 

首页index.html

  1. > 
  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="" 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. ////////////////////////设置被选
  66. css样式////////////////////////  
  67. function setlistyle(){  
  68.  for(var i=0;i
  69.   obj_div.firstChild.childNodes[i].id="";  
  70.  }  
  71.  if(li_num!=-1)obj_div.firstChild.childNodes[li_num].id="liseleted";  
  72. }  
  73. ////////////////////////鼠标经过提示层////////////////////////  
  74. function overli(Fun_seletedlinum){  
  75.  if(li_num==-1)value_ing=obj_input.value;  
  76.  li_num=Fun_seletedlinum;  
  77.  setlistyle();  
  78. }  
  79. ////////////////////////鼠标拖动提示层////////////////////////  
  80. function moveli(){  
  81.  if(window.getSelection){  
  82.   setfocus();  
  83.   window.getSelection().removeAllRanges();  
  84.  }else{  
  85.   document.selection.empty();  
  86.   setfocus();  
  87.  }  
  88. }  
  89. ////////////////////////鼠标按下提示层////////////////////////  
  90. function downli(Fun_seletedlinum){  
  91.  if(!obj_input)return false;  
  92.  li_down=Fun_seletedlinum;  
  93.  input_focus=true;  
  94. }  
  95. ////////////////////////鼠标弹起提示层////////////////////////  
  96. function upli(Fun_seletedlinum,Fun_event){  
  97.  if(!obj_input)return false;  
  98.  if(Fun_event.button==2){li_down=-1;return}  
  99.  if(li_down!=Fun_seletedlinum){  
  100.   li_down=-1;  
  101.   return false;  
  102.  }  
  103.  clearTimeout(ajax_delay);  
  104.  clearTimeout(updown_delay);  
  105.  updown_run=true;  
  106.  ajax_run=false;  
  107.  ajax_run_ing=false;  
  108.  li_num=-1;  
  109.  div_word=null;  
  110.  
  111.  value_ed=obj_div.firstChild.childNodes[Fun_seletedlinum].childNodes[1].nodeValue;  
  112.  obj_input.value=value_ed;  
  113.  value_ing=value_ed;  
  114.  hideajaxdiv();  
  115.  obj_div.innerHTML="";  
  116. }  
  117. ////////////////////////设置文本框获取焦点///////////////////////  
  118. function setfocus(){  
  119.  if(window.event){  
  120.   var r = obj_input.createTextRange();  
  121.   r.moveStart('character',obj_input.value.length);  
  122.   r.collapse(true);  
  123.   r.select();  
  124.  }else{  
  125.   obj_input.selectionStart=obj_input.value.length;  
  126.   obj_input.focus();  
  127.  }  
  128. }  
  129. ////////////////////////文本框失去焦点////////////////////////  
  130. function blurdeal(){  
  131.  if(input_focus==true){  
  132.   setfocus();  
  133.   setTimeout("setfocus()");  
  134.   return false;  
  135.  }  
  136.  updown_run=false;  
  137.  ajax_run=false;  
  138.  ajax_run_ing=false;  
  139.  clearInterval(main_delay);  
  140.  clearTimeout(ajax_delay);  
  141.  clearTimeout(updown_delay);  
  142.  hideajaxdiv();  
  143.  if(value_ed!=obj_input.value)obj_div.innerHTML="";  
  144. }  
  145. ////////////////////////文本框获取焦点////////////////////////  
  146. function focusdeal(Fun_event){  
  147.  if(!obj_div)createajaxdiv();  
  148.  if(input_focus==true){  
  149.   input_focus=false;  
  150.   return false;  
  151.  }  
  152.  var obj=((window.event)?Fun_event.srcElement:Fun_event.target);  
  153.  if(obj.type!="text")return false;  
  154.  updown_run=true;  
  155.  ajax_run=true;  
  156.  ajax_run_ing=false;  
  157.  if(obj_input==obj && value_ed==obj.value && obj_div.innerHTML!=""){  
  158.   obj_div.style.display="block";  
  159.   removediv();  
  160.  }else{  
  161.   obj_input=obj;  
  162.   value_ed=obj.value;  
  163.   value_ing=obj.value;  
  164.   value_unexit="";  
  165.   li_num=-1;  
  166.   li_down=-1;  
  167.   div_word=null;  
  168.   obj_div.innerHTML="";  
  169.   removediv();  
  170.  }  
  171.  main_delay=setInterval("mainajax()",10);  
  172. }  
  173. ////////////////////////主函数////////////////////////  
  174. function mainajax(){  
  175.  if(value_ed==obj_input.value)return false;  
  176.  if(value_unexit!="" && (obj_input.value).indexOf(value_unexit)==0){hideajaxdiv();obj_div.innerHTML="";return false;}  
  177.  if(value_ed!=obj_input.value && ajax_run_ing==false){  
  178.   ajax_run=true;  
  179.   value_ed=obj_input.value;  
  180.   clearTimeout(ajax_delay);  
  181.   if(obj_input.value!=""){  
  182.    ajax_delay=setTimeout("getsearch();",time_delayajax);  
  183.   }else{  
  184.    hideajaxdiv();  
  185.    obj_div.innerHTML="";  
  186.    ajax_run=false;  
  187.    return false;  
  188.      
  189.   }    
  190.  }  
  191. }  
  192. ////////////////////////获取搜索内容////////////////////////  
  193. function getsearch(){  
  194.  var temp_value=obj_input.value;  
  195.  if(ajax_xmlhttp==null){  
  196.   return false;  
  197.  }else if(ajax_xmlhttp.readyState!=0){  
  198.   ajax_xmlhttp.abort();  
  199.   ajax_run_ing=false;  
  200.  }  
  201.  ajax_xmlhttp.onreadystatechange=function(){  
  202.   if(ajax_run==false){ajax_xmlhttp.abort();ajax_run_ing=false;return false;}  
  203.   if(ajax_xmlhttp.readyState==4){  
  204.    obj_div.innerHTML="";  
  205.    if(ajax_xmlhttp.status==200 || ajax_xmlhttp.status==304){  
  206.     var contant=ajax_xmlhttp.responseText;  
  207.     if(contant!="" && ajax_run==true){  
  208.      div_word=temp_value;  
  209.      obj_div.innerHTML=resetcontant(contant);  
  210.      obj_div.style.display="block";  
  211.      removediv();removediv();  
  212.     }else{  
  213.      hideajaxdiv();  
  214.     }  
  215.     updown_run=true;  
  216.     ajax_run_ing=false;  
  217.     li_num=-1;  
  218.     if(contant=="")value_unexit=temp_value;  
  219.    }  
  220.   }  
  221.  }  
  222.  ajax_xmlhttp.open("post",url,true);  
  223.  ajax_xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');  
  224.  ajax_run_ing=true;  
  225.  ajax_xmlhttp.send("sift_value="+escape(temp_value)); //提交到后台的值*****************************************  
  226. }  
  227. ////////////////////////内容重组///////////////////////  
  228. function resetcontant(Fun_contant){  
  229.  if(Fun_contant==null || Fun_contant=="")return "";  
  230.  var a=Fun_contant.substring(1,Fun_contant.length-1);  
  231.  if(Fun_contant==null || Fun_contant=="")return "";  
  232.  var b=a.split("''");  
  233.  var c;  
  234.  var d;  
  235.  d="
      ";  
    •  for(var i in b){  
    •   c=b[i].split(",");  
    •   //***************************************************************  
    •   d=d+"+i+");" onmousedown="downli("+i+")" onmouseup="upli("+i+",event)" onmousemove="moveli();">约"+c[1]+"结果"+c[0]+"
      • ";  
    •   //***************************************************************  
    •  }  
    •  d=d+"关闭
      • " 
    •  d=d+"
    "    ;  
  236.  return d;  
  237. }  
  238. ////////////////////////键盘事件////////////////////////  
  239. function keydowndeal(Fun_event){  
  240.  var keyc=((window.event)?Fun_event.keyCode:Fun_event.which);  
  241.  if(keyc==13){hideajaxdiv();return false;}  
  242.  if(keyc==27){  
  243.   if(obj_div.style.display=="block" && li_num>-1)value_ed=obj_input.value=value_ing;  
  244.   hideajaxdiv();  
  245.   return false;  
  246.  }   
  247.  if(keyc==40 || keyc==38){  
  248.   if(div_word==obj_input.value && obj_div.style.display=="none" && obj_div.innerHTML!=""){  
  249.    obj_div.style.display="block";  
  250.    removediv();  
  251.    return false;  
  252.   }  
  253.   if(li_num==-1){  
  254.    if(div_word!=obj_input.value)return false;  
  255.   }else{  
  256.    if(div_word!=value_ing)return false;  
  257.   }  
  258.   if(updown_run==false || ajax_run_ing==true || obj_div.style.display=="none")return false;  
  259.   updown_delay=setTimeout("updownli("+keyc+")",time_delayupdown);  
  260.   updown_run=false;  
  261.  }  
  262. }  
  263. ////////////////////////方向键移动li////////////////////////  
  264. function updownli(Fun_key){  
  265.  if(!obj_div){return false;}  
  266.  updown_run=true;  
  267.  if(li_num==-1){  
  268.   if(div_word!=obj_input.value){hideajaxdiv();obj_div.innerHTML="";li_num=-1;return false;}  
  269.  }else{  
  270.   if(div_word!=value_ing){hideajaxdiv();obj_div.innerHTML="";li_num=-1;return false;}  
  271.  }  
  272.  if(updown_run==false)return false;  
  273.  if(li_num==-1)value_ing=value_ed;  
  274.  if(Fun_key==40){  
  275.   if(li_num
  276.    li_num++;  
  277.   }else{  
  278.    li_num=-1;  
  279.   }  
  280.  }  
  281.  if(Fun_key==38){  
  282.   if(li_num>=0){  
  283.    li_num--;  
  284.   }else{  
  285.    li_num=obj_div.firstChild.childNodes.length-2;  
  286.   }  
  287.  }  
  288.  if(li_num!=-1){  
  289.   value_ed=obj_input.value=obj_div.firstChild.childNodes[li_num].childNodes[1].nodeValue;  
  290.  }else{  
  291.   value_ed=obj_input.value=value_ing;  
  292.  }  
  293.  setlistyle();  
  294. } 

 后台ajax.asp

  1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001" %>  
  2. <%option explicit%>  
  3. <%Response.CodePage="65001"%>  
  4. <%Response.Charset="utf-8" %>  
  5.   
  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. %> 

 

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2024 www.111COM.NET AII Right Reserved 苏ICP备17065847号-2

网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理