suggest ajax,高仿google suggest ajax示例

///搜索提示框/

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();

}