修復了一些細節代碼（支持持續按鍵事件）
*項目名稱:
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="";
}
}
}
打包文件下載
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
