在線客服
24小時(shí)免費(fèi)咨詢電話：18978941786
客服時(shí)間：上午9：30~下午6點(diǎn)
當(dāng)前位置：首頁>> 技術(shù)文章 >> ASP學(xué)習(xí) >> 高仿google suggest ajax示例
高仿google suggest ajax示例
收藏 分享 發(fā)布日期:2012-2-12 16:30:50 編輯:admin 文章來源: 點(diǎn)擊率:
前段時(shí)間想用google suggest在網(wǎng)上找了很多都不盡人意,于是自己花了些時(shí)間寫了一個(gè),跟google suggest 基本一樣,后面的約多少結(jié)果非本程序范圍哦
需要修改的地方有
javascript.js
| var url="ajax.asp"; //后臺(tái)地址 var time_delayajax=300; //搜索延遲 var time_delayupdown=100; //方向鍵延遲 obj_div.style.top = (xtop + 20) + "px"; //20差不多是輸入框的高度,請(qǐng)根據(jù)實(shí)際情況調(diào)整 ajax_xmlhttp.send("sift_value="+escape(temp_value)); //提交到后臺(tái)的值 dd=d+"<li onmouseover=\"overli("+i+");\" onmousedown=\"downli("+i+")\" onmouseup=\"upli("+i+",event)\" onmousemove=\"moveli();\"><span>約"+c[1]+"結(jié)果</span>"+c[0]+"</li>";//****li的顯示 |
后臺(tái)輸出結(jié)果格式必需為'文本1,文本2'..... 'java,2''javascript,11''java示例,22'等
default.css
| .ajaxsearch { width:300px; //提示層的寬度 } |
首頁index.html
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="default.css" /> <script language="JavaScript" src="javascript.js" type="text/javascript"></script> <title>Google suggest高仿示例</title> </head> <body onResize="removediv();"> <div style="margin:20px 50px"> <input style="width:298px;height:18px" type="text" autocomplete="off" onBlur="blurdeal();" onKeyDown="keydowndeal(event);" onFocus="focusdeal(event);" /> </div> </body> </html> |
腳本javascript.js
| ///////////////////////////////搜索提示框///////////////////////////////// var obj_div; //提示層對(duì)象 var obj_input; //輸入框?qū)ο?nbsp; var main_delay; //判斷值變化延遲對(duì)象 var ajax_delay; //ajax延遲搜索對(duì)象 var updown_delay; //方向鍵延遲對(duì)象 var ajax_xmlhttp; //ajax對(duì)象 var div_word=null; //當(dāng)前提示層對(duì)應(yīng)的搜索值 var li_num=-1; //偽光標(biāo)位置,提示層被選中的li序號(hào),從0開始 var li_down=-1; //鼠標(biāo)按下提示層的序號(hào) var value_ed=''; //輸入框延遲前的值 var value_ing=''; //輸入框當(dāng)前的值 var value_unexit=''; //搜索過沒有結(jié)果的值開頭 var updown_run=false; //允許方向鍵上下 var ajax_run=false; //true為正常進(jìn)程,false停止ajax var ajax_run_ing=false; //true正在運(yùn)行,false空閑 var input_focus=false; //文本框焦點(diǎn) var url='ajax.asp'; //后臺(tái)地址********************************************************** 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;} } } ////////////////////////創(chuàng)建提示層//////////////////////// 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; } ////////////////////////設(shè)置提示層位置//////////////////////// 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差不多是輸入框的高度,請(qǐng)根據(jù)實(shí)際情況調(diào)整************************************************************8 li_down=-1; } ////////////////////////隱藏提示層//////////////////////// function hideajaxdiv(){ obj_div.style.display='none'; li_down=-1; } ////////////////////////設(shè)置被選<li>css樣式//////////////////////// function setlistyle(){ for(var i=0;i<obj_div.firstChild.childNodes.length;i++){ obj_div.firstChild.childNodes[i].id=''; } if(li_num!=-1)obj_div.firstChild.childNodes[li_num].id='liseleted'; } ////////////////////////鼠標(biāo)經(jīng)過提示層//////////////////////// function overli(Fun_seletedlinum){ if(li_num==-1)value_ing=obj_input.value; li_num=Fun_seletedlinum; setlistyle(); } ////////////////////////鼠標(biāo)拖動(dòng)提示層//////////////////////// function moveli(){ if(window.getSelection){ setfocus(); window.getSelection().removeAllRanges(); }else{ document.selection.empty(); setfocus(); } } ////////////////////////鼠標(biāo)按下提示層//////////////////////// function downli(Fun_seletedlinum){ if(!obj_input)return false; li_down=Fun_seletedlinum; input_focus=true; } ////////////////////////鼠標(biāo)彈起提示層//////////////////////// 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=''; } ////////////////////////設(shè)置文本框獲取焦點(diǎn)/////////////////////// 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(); } } ////////////////////////文本框失去焦點(diǎn)//////////////////////// 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=''; } ////////////////////////文本框獲取焦點(diǎn)//////////////////////// 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); } ////////////////////////主函數(shù)//////////////////////// 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; } } } ////////////////////////獲取搜索內(nèi)容//////////////////////// 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)); //提交到后臺(tái)的值***************************************** } ////////////////////////內(nèi)容重組/////////////////////// 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[i].split(','); //*************************************************************** d=d+'<li onmouseover=\'overli('+i+');\' onmousedown=\'downli('+i+')\' onmouseup=\'upli('+i+',event)\' onmousemove=\'moveli();\'><span>約'+c[1]+'結(jié)果</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();\'>關(guān)閉</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' && 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; } } ////////////////////////方向鍵移動(dòng)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(); } |
后臺(tái)ajax.asp
| <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001" %> <%option explicit%> <%Response.CodePage="65001"%> <%Response.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 response.Write(Contant) Rs.close set Rs=nothing %> |
