高仿 google suggest ajax 示例

作者: 2011/3/15 16:55:30

  前段时间想用google suggest在网上找了很多都不尽人意,于是自己花了些时间写了一个,跟google suggest 基本一样,后面的约多少结果非本程序范围哦。

  需要修改的地方有

  javascript.js

  var url="ajax.asp"; //后台地址

  var time_delayajax=300; //搜索延迟

  var time_delayupdown=100; //方向键延迟

  obj_div.style.top = (xtop + 20) + "px"; //20差不多是输入框的高度,请根据实际情况调整

  ajax_xmlhttp.send("sift_value="+escape(temp_value)); //提交到后台的值

  dd=d+"

  • 约"+c[1]+"结果"+c[0]+"
  • ";//****li的显示

     

      后台输出结果格式必需为'文本1,文本2'..... 'java,2''javascript,11''java示例,22'等

      default.css

      .ajaxsearch {

       width:300px; //提示层的宽度

      }

      首页index.html

      

      

      

      

      

      

      

      

      

      

     

      

      

     

      

      

      脚本javascript.js

      ///////////////////////////////搜索提示框/////////////////////////////////

      var obj_div; //提示层对象

      var obj_input; //输入框对象

      var main_delay; //判断值变化延迟对象

      var ajax_delay; //ajax延迟搜索对象

      var updown_delay; //方向键延迟对象

      var ajax_xmlhttp; //ajax对象

      var div_word=null; //当前提示层对应的搜索值

      var li_num=-1; //伪光标位置,提示层被选中的li序号,从0开始

      var li_down=-1; //鼠标按下提示层的序号

      var value_ed=''; //输入框延迟前的值

      var value_ing=''; //输入框当前的值

      var value_unexit=''; //搜索过没有结果的值开头

      var updown_run=false; //允许方向键上下

      var ajax_run=false; //true为正常进程,false停止ajax

      var ajax_run_ing=false; //true正在运行,false空闲

      var input_focus=false; //文本框焦点

      var url='ajax.asp'; //后台地址**********************************************************

      var time_delayajax=300; //搜索延迟**********************************************************

      var time_delayupdown=100; //方向键延迟********************************************************

      

      var $=function(Fun_id){

       return document.getElementById(Fun_id);

      }

      try{

       ajax_xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');

      }catch(e){

       try{

       ajax_xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');

       }catch(e){

       try{

       ajax_xmlhttp= new XMLHttpRequest();

       }catch(e){ajax_xmlhttp=null;}

       }

      }

      ////////////////////////创建提示层////////////////////////

      function createajaxdiv(){

       var create_div = document.createElement('div');

       create_div.type = 'div';

       var promptdiv = document.body.appendChild(create_div);

       promptdiv.className = 'ajaxsearch';

       obj_div=promptdiv;

      }

      ////////////////////////设置提示层位置////////////////////////

      function removediv(){

       if(!obj_div || !obj_input)return false;

       if(obj_div.style.display=='none')return false;

       var obj=obj_input;

       var xtop=0;

       var xleft=0;

       while(obj){

       xtop += obj['offsetTop'];

       xleft += obj['offsetLeft'];

       obj = obj.offsetParent;

       }

       obj_div.style.left = xleft + 'px';

       obj_div.style.top = (xtop + 20) + 'px'; //20差不多是输入框的高度,请根据实际情况调整************************************************************8

       li_down=-1;

      }

      ////////////////////////隐藏提示层////////////////////////

      function hideajaxdiv(){

       obj_div.style.display='none';

       li_down=-1;

      }

      ////////////////////////设置被选

  • css样式////////////////////////

     

      function setlistyle(){

       for(var i=0;i

       obj_div.firstChild.childNodes[i].id='';

       }

       if(li_num!=-1)obj_div.firstChild.childNodes[li_num].id='liseleted';

      }

      ////////////////////////鼠标经过提示层////////////////////////

      function overli(Fun_seletedlinum){

       if(li_num==-1)value_ing=obj_input.value;

       li_num=Fun_seletedlinum;

       setlistyle();

      }

      ////////////////////////鼠标拖动提示层////////////////////////

      function moveli(){

       if(window.getSelection){

       setfocus();

       window.getSelection().removeAllRanges();

       }else{

       document.selection.empty();

       setfocus();

       }

      }

      ////////////////////////鼠标按下提示层////////////////////////

      function downli(Fun_seletedlinum){

       if(!obj_input)return false;

       li_down=Fun_seletedlinum;

       input_focus=true;

      }

      ////////////////////////鼠标弹起提示层////////////////////////

      function upli(Fun_seletedlinum,Fun_event){

       if(!obj_input)return false;

       if(Fun_event.button==2){li_down=-1;return}

       if(li_down!=Fun_seletedlinum){

       li_down=-1;

       return false;

       }

       clearTimeout(ajax_delay);

       clearTimeout(updown_delay);

       updown_run=true;

       ajax_run=false;

       ajax_run_ing=false;

       li_num=-1;

       div_word=null;

      

       value_ed=obj_div.firstChild.childNodes[Fun_seletedlinum].childNodes[1].nodeValue;

       obj_input.value=value_ed;

       value_ing=value_ed;

       hideajaxdiv();

       obj_div.innerHTML='';

      }

      ////////////////////////设置文本框获取焦点///////////////////////

      function setfocus(){

       if(window.event){

       var r = obj_input.createTextRange();

       r.moveStart('character',obj_input.value.length);

       r.collapse(true);

       r.select();

       }else{

       obj_input.selectionStart=obj_input.value.length;

       obj_input.focus();

       }

      }

      ////////////////////////文本框失去焦点////////////////////////

      function blurdeal(){

       if(input_focus==true){

       setfocus();

       setTimeout('setfocus()');

       return false;

       }

       updown_run=false;

       ajax_run=false;

       ajax_run_ing=false;

       clearInterval(main_delay);

       clearTimeout(ajax_delay);

       clearTimeout(updown_delay);

       hideajaxdiv();

       if(value_ed!=obj_input.value)obj_div.innerHTML='';

      }

      ////////////////////////文本框获取焦点////////////////////////

      function focusdeal(Fun_event){

       if(!obj_div)createajaxdiv();

       if(input_focus==true){

       input_focus=false;

       return false;

       }

       var obj=((window.event)?Fun_event.srcElement:Fun_event.target);

       if(obj.type!='text')return false;

       updown_run=true;

       ajax_run=true;

       ajax_run_ing=false;

       if(obj_input==obj && value_ed==obj.value && obj_div.innerHTML!=''){

       obj_div.style.display='block';

       removediv();

       }else{

       obj_input=obj;

       value_ed=obj.value;

       value_ing=obj.value;

       value_unexit='';

       li_num=-1;

       li_down=-1;

       div_word=null;

       obj_div.innerHTML='';

       removediv();

       }

       main_delay=setInterval('mainajax()',10);

      }

      ////////////////////////主函数////////////////////////

      function mainajax(){

       if(value_ed==obj_input.value)return false;

       if(value_unexit!='' && (obj_input.value).indexOf(value_unexit)==0){hideajaxdiv();obj_div.innerHTML='';return false;}

       if(value_ed!=obj_input.value && ajax_run_ing==false){

       ajax_run=true;

       value_ed=obj_input.value;

       clearTimeout(ajax_delay);

       if(obj_input.value!=''){

       ajax_delay=setTimeout('getsearch();',time_delayajax);

       }else{

       hideajaxdiv();

       obj_div.innerHTML='';

       ajax_run=false;

      return false;

      

       }

       }

      }

      ////////////////////////获取搜索内容////////////////////////

      function getsearch(){

       var temp_value=obj_input.value;

       if(ajax_xmlhttp==null){

       return false;

       }else if(ajax_xmlhttp.readyState!=0){

       ajax_xmlhttp.abort();

       ajax_run_ing=false;

       }

       ajax_xmlhttp.onreadystatechange=function(){

       if(ajax_run==false){ajax_xmlhttp.abort();ajax_run_ing=false;return false;}

       if(ajax_xmlhttp.readyState==4){

       obj_div.innerHTML='';

      if(ajax_xmlhttp.status==200 || ajax_xmlhttp.status==304){

       var contant=ajax_xmlhttp.responseText;

       if(contant!='' && ajax_run==true){

       div_word=temp_value;

       obj_div.innerHTML=resetcontant(contant);

       obj_div.style.display='block';

       removediv();removediv();

       }else{

       hideajaxdiv();

       }

       updown_run=true;

       ajax_run_ing=false;

       li_num=-1;

       if(contant=='')value_unexit=temp_value;

       }

       }

       }

       ajax_xmlhttp.open('post',url,true);

       ajax_xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');

       ajax_run_ing=true;

       ajax_xmlhttp.send('sift_value='+escape(temp_value)); //提交到后台的值*****************************************

      }

      ////////////////////////内容重组///////////////////////

      function resetcontant(Fun_contant){

       if(Fun_contant==null || Fun_contant=='')return '';

       var a=Fun_contant.substring(1,Fun_contant.length-1);

       if(Fun_contant==null || Fun_contant=='')return '';

       var b=a.split('''');

       var c;

       var d;

       d='

      ';

       

         for(var i in b){

         c=b[i].split(',');

         //***************************************************************

         d=d+'

    • 约'+c[1]+'结果'+c[0]+'
    • ';

       

         //***************************************************************

         }

         d=d+'

    • 关闭
    • '

       

         d=d+'

    ';

     

       return d;

      }

      ////////////////////////键盘事件////////////////////////

      function keydowndeal(Fun_event){

       var keyc=((window.event)?Fun_event.keyCode:Fun_event.which);

       if(keyc==13){hideajaxdiv();return false;}

       if(keyc==27){

       if(obj_div.style.display=='block' && li_num>-1)value_ed=obj_input.value=value_ing;

       hideajaxdiv();

       return false;

       }

       if(keyc==40 || keyc==38){

       if(div_word==obj_input.value && obj_div.style.display=='none' && obj_div.innerHTML!=''){

       obj_div.style.display='block';

       removediv();

      return false;

       }

       if(li_num==-1){

      if(div_word!=obj_input.value)return false;

       }else{

      if(div_word!=value_ing)return false;

       }

       if(updown_run==false || ajax_run_ing==true || obj_div.style.display=='none')return false;

       updown_delay=setTimeout('updownli('+keyc+')',time_delayupdown);

       updown_run=false;

       }

      }

      ////////////////////////方向键移动li////////////////////////

      function updownli(Fun_key){

       if(!obj_div){return false;}

       updown_run=true;

       if(li_num==-1){

       if(div_word!=obj_input.value){hideajaxdiv();obj_div.innerHTML='';li_num=-1;return false;}

       }else{

       if(div_word!=value_ing){hideajaxdiv();obj_div.innerHTML='';li_num=-1;return false;}

       }

       if(updown_run==false)return false;

       if(li_num==-1)value_ing=value_ed;

       if(Fun_key==40){

       if(li_num

       li_num++;

       }else{

       li_num=-1;

       }

       }

       if(Fun_key==38){

       if(li_num>=0){

       li_num--;

       }else{

       li_num=obj_div.firstChild.childNodes.length-2;

       }

       }

       if(li_num!=-1){

       value_ed=obj_input.value=obj_div.firstChild.childNodes[li_num].childNodes[1].nodeValue;

       }else{

       value_ed=obj_input.value=value_ing;

       }

       setlistyle();

      }

      后台ajax.asp

      

      

      

      

      

      

  • 特别推荐

    玩家留言 跟帖评论
    查看更多评论