快捷導(dǎo)航

AJAX實(shí)現(xiàn)仿Google Suggest效果

更新時(shí)間：2007年07月09日 00:00:00 作者：

修復(fù)了一些細(xì)節(jié)代碼（支持持續(xù)按鍵事件）
*項(xiàng)目名稱:AJAX實(shí)現(xiàn)類Google Suggest效果
*作者:草履蟲(chóng)(也就是藍(lán)色的ecma)
*聯(lián)系:caolvchong@gmail.com
*時(shí)間:2007-7-7
*工具: DreamWeaver(寫(xiě)ASP),Aptana(寫(xiě)Javascript,HTML和CSS),Emeditor(寫(xiě)這篇文章),Access2003(數(shù)據(jù)庫(kù))
*測(cè)試平臺(tái):Firefox2.0,IE6.0,IE7.0
*演示地址:http://finish.3322.org/suggest/index.htm(短期有效,在本機(jī)上,可能訪問(wèn)不順暢)
*原文地址:http://cceer.xmu.edu.cn/blog/view.asp?id=55(轉(zhuǎn)貼,使用請(qǐng)注明)
*:文件結(jié)構(gòu):
  index.htm:首頁(yè),展現(xiàn)效果
  ajax_result.asp:ajax調(diào)用后臺(tái)返回結(jié)果文件
  result.asp:搜索結(jié)果文件,這個(gè)我并沒(méi)有做,具體功能根據(jù)需求來(lái)寫(xiě)
  數(shù)據(jù)庫(kù)(suggest.mdb):
id:自動(dòng)編號(hào)
keyword:關(guān)鍵字
seachtimes:被搜索次數(shù)
matchnum:匹配的文章數(shù)目(關(guān)于這個(gè)方面想了蠻久,如何取得文章數(shù)呢,不能是搜索時(shí)動(dòng)態(tài)產(chǎn)生,不然在偌大數(shù)據(jù)庫(kù)中查詢費(fèi)時(shí)費(fèi)力.那么必然是在后臺(tái)某個(gè)時(shí)候去其他的數(shù)據(jù)庫(kù)表中添加的,原來(lái)想把這方面也做了,但限于算法的不成熟和時(shí)間的限制.所以就用了隨機(jī)數(shù)來(lái)替換.)
*補(bǔ)充:
  和google suggest還有一些差距,比如一直按著方向鍵問(wèn)題和其他細(xì)節(jié)問(wèn)題,這些都有待改進(jìn).
*效果圖:

suggest.js

復(fù)制代碼代碼如下:

var j=-1; 
var temp_str; 
var $=function(node){ 
return document.getElementById(node); 
} 
var $$=function(node){ 
return document.getElementsByTagName(node); 
} 
function ajax_keyword(){ 
var xmlhttp; 
try{ 
  xmlhttp=new XMLHttpRequest(); 
  } 
catch(e){ 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
xmlhttp.onreadystatechange=function(){ 
if (xmlhttp.readyState==4){ 
  if (xmlhttp.status==200){ 
   var data=xmlhttp.responseText; 
   $("suggest").innerHTML=data; 
   j=-1; 
   } 
  } 
} 
xmlhttp.open("post", "ajax_result.asp", true); 
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 
xmlhttp.send("keyword="+escape($("keyword").value));  
}   
function keydeal(e){ 
var keyc; 
if(window.event){ 
  keyc=e.keyCode; 
  } 
else if(e.which){ 
  keyc=e.which; 
  } 
if(keyc!=40 && keyc!=38){ 
  ajax_keyword(); 
  temp_str=$("keyword").value; 
  } 
if(keyc==40 || keyc==38){ 
  if(keyc==40){ 
   if(j<$$("li").length){ 
    j++; 
    if(j>=$$("li").length){ 
     j=-1; 
    } 
   } 
  if(j>=$$("li").length){ 
   j=-1; 
  } 
} 
  if(keyc==38){ 
   if(j>=0){ 
    j--; 
    if(j<=-1){ 
     j=$$("li").length; 
    } 
   } 
   else{ 
    j=$$("li").length-1; 
   } 
  } 
  set_style(j); 
  if(j>=0 && j<$$("li").length){ 
   $("keyword").value=$$("li")[j].childNodes[0].nodeValue; 
   } 
  else{ 
   $("keyword").value=temp_str; 
   } 
  } 
} 
function set_style(num){ 
for(var i=0;i<$$("li").length;i++){ 
  var li_node=$$("li"); 
  li_node.className=""; 
  } 
if(j>=0 && j<$$("li").length){ 
  var i_node=$$("li")[j]; 
  $$("li")[j].className="select"; 
  } 
} 
function mo(nodevalue){ 
j=nodevalue; 
set_style(j); 
} 
function form_submit(){ 
if(j>=0 && j<$$("li").length){ 
$$("input")[0].value=$$("li")[j].childNodes[0].nodeValue; 
} 
document.search.submit(); 
} 
function hide_suggest(){ 
var nodes=document.body.childNodes 
for(var i=0;i<nodes.length;i++){ 
  if(nodes!=$("keyword")){ 
   $("suggest").innerHTML=""; 
   } 
  } 
}