AJAX實現仿Google Suggest效果

來源:互聯網
上載者:User

修複了一些細節代碼(支援持續按鍵事件)
*項目名稱: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="";
}
}
}

打包檔案下載

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.