AJAX實現仿Google Suggest效果

2024-09-01 08:29:39

字體：大中小

來源：轉載

供稿：網友

修復了一些細節代碼（支持持續按鍵事件）
*項目名稱: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>

上一篇：AJAX亂碼解決新方法

下一篇：[asp]天楓AJAX blog V1.0 程序提供下載了