前段時間想用google suggest在網上找了很多都不盡人意,於是自己花了些時間寫了一個,跟google suggest 基本一樣,後面的約多少結果非本程序範圍哦。對於更完整的程式碼可以參考，這個是支援資料庫的版本。經過腳本之家編輯測試。
Asp+Ajax仿google搜尋提示效果資料庫版
需要修改的地方有
複製代碼代碼如下:
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+<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
複製代碼代碼如下:
.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; //提示層對象
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[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=<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]+結果</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 && 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<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();
}
後台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
%>