AJAX實現仿Google Suggest效果

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> AJAX實現仿Google Suggest效果

編輯：AJAX基礎知識

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

限於文章長度控制只貼首頁和js代碼,其他代碼請在下載包中查看
復制代碼代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<meta http-equiv="Content-Type" c />
<title>草履蟲---簡易Google Suggest</title>
  <link type="text/css" rel="stylesheet" href="suggest.css"/>
  <script type="text/javascript" src="suggest.js"></script>
</head>
<body >
  <img src="suggest.gif"  />
  <form action="result.asp" method="post" name="search" autocomplete="off">
    <input type="text" name="keyword" id="keyword"  />
    <input type="submit" value="手氣不錯"/>
    <div id="suggest"></div>
  </form>
</body>
</html>
suggest.js
復制代碼代碼如下:
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="";
   }
  }
}

打包文件下載

AJAX基礎知識

Ajax Session失效跳轉登錄頁面的方法: 在Struts應用中，我們發出的請求都會經過相應的攔截器進行相關處理，一般都會有一個用戶登錄攔截（
看圖理解普通交互方式和Ajax交互方式區別: Ajax引擎對象中的方法： abort()　　停止當前請求 getAllResponseHeader
關於ajax的多次請求問題: 我們在用ajax請求數據時，可能會遇到一次點擊多次觸發的可能。（比如說：ajax 的 onready

AJAX基礎知識 AJAX詳解

DIV CSS 佈局教程網

相關文章