高仿google suggest ajax示例

herbss

///////////////////////////////搜索提示框/////////////////////////////////  
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;  
}  
////////////////////////设置被选<li>css样式////////////////////////  
function setlistyle(){  
for(var i=0;i<obj_div.firstChild.childNodes.length;i++){  
  obj_div.firstChild.childNodes.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.selecti**tart=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 &amp;&amp; value_ed==obj.value &amp;&amp; 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!='' &amp;&amp; (obj_input.value).indexOf(value_unexit)==0){hideajaxdiv();obj_div.innerHTML='';return false;}  
if(value_ed!=obj_input.value &amp;&amp; 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.resp**eText;  
    if(contant!='' &amp;&amp; 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='<ul>';  
for(var i in b){  
  c=b.split(',');  
  //***************************************************************  
  d=d+'<li onmouseover=\'overli('+i+');\' onmousedown=\'downli('+i+')\' onmouseup=\'upli('+i+',event)\' onmousemove=\'moveli();\'><span>约'+c[1]+'结果</span>'+c[0]+'</li>';  
  //***************************************************************  
}  
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>'
d=d+'</ul>';  
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' &amp;&amp; li_num>-1)value_ed=obj_input.value=value_ing;  
  hideajaxdiv();  
  return false;  
}   
if(keyc==40 || keyc==38){  
  if(div_word==obj_input.value &amp;&amp; obj_div.style.display=='none' &amp;&amp; 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<obj_div.firstChild.childNodes.length-2){  
   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();  
}

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

需要修改的地方有

javascript.js

1. var url="ajax.asp"; //后台地址
   
2. var time_delayajax=300; //搜索延迟
   
3. var time_delayupdown=100; //方向键延迟
   
4. obj_div.style.top = (xtop + 20) + "px"; //20差不多是输入框的高度,请根据实际情况调整
   
5. ajax_xmlhttp.send("sift_value="+escape(temp_value)); //提交到后台的值
   
6. 
   
7. 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; //提示层的宽度
   
3. }

复制代码

首页index.html

1. 
   
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
3. <html xmlns="http://www.w3.org/1999/xhtml">
   
4. <head>
   
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
6. <link rel="stylesheet" type="text/css" href="default.css" />
   
7. <script language="JavaScript" src="javascript.js" type="text/javascript"></script>
   
8. <title>Google suggest高仿示例</title>
   
9. </head>
   
10. 
    
11. <body onResize="removediv();">
    
12. <div style="margin:20px 50px">
    
13. <input style="width:298px;height:18px" type="text" autocomplete="off" onBlur="blurdeal();" onKeyDown="keydowndeal(event);" onFocus="focusdeal(event);" />
    
14. </div>
    
15. </body>
    
16. </html>

复制代码

脚本javascript.js

herbss

后台ajax.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001" %>
<%option explicit%>
<%Resp**e.CodePage="65001"%>
<%Resp**e.Charset="utf-8" %>
<!--#include file="conn.asp"-->
<%
dim Sift_value
dim Sql,Rs,I,Num
dim Contant
Contant=""
Num=10
Sift_value=replace(unescape(request.form("sift_value")),"""","""""")

Sql="select top "&Num&" keyword,matchnum from search where keyword like """&Sift_value&"%"" order by id"

set Rs=server.CreateObject("adodb.recordset")
Rs.open Sql,Conn,1,1
if not (Rs.eof and Rs.bof) then
for I=0 to Num-1
Contant=Contant&"'"&rs(0)&","&rs(1)&"'"
Rs.movenext
if Rs.eof then exit for
next
end if
resp**e.Write(Contant)
Rs.close
set Rs=nothing
%>

心情夏季

很精典,谢谢! 难得的好贴

话太普通

说实话，我还真没看懂