修復(fù)了一些細(xì)節(jié)代碼（支持持續(xù)按鍵事件）
*項(xiàng)目名稱:
AJAX實(shí)現(xiàn)類Google Suggest效果*作者:
草履蟲(也就是藍(lán)色的ecma)*聯(lián)系:
caolvchong@gmail.com*時(shí)間:2007-7-7
*工具: DreamWeaver(寫ASP),Aptana(寫Javascript,HTML和CSS),Emeditor(寫這篇文章),Access2003(數(shù)據(jù)庫)
*測試平臺(tái):Firefox2.0,IE6.0,IE7.0
*演示地址:
http://finish.3322.org/suggest/index.htm(短期有效,在本機(jī)上,可能訪問不順暢)*原文地址:
http://cceer.xmu.edu.cn/blog/view.asp?id=55(轉(zhuǎn)貼,使用請(qǐng)注明)*:文件結(jié)構(gòu):
index.htm:首頁,展現(xiàn)效果
ajax_result.asp:ajax調(diào)用后臺(tái)返回結(jié)果文件
result.asp:搜索結(jié)果文件,這個(gè)我并沒有做,具體功能根據(jù)需求來寫
數(shù)據(jù)庫(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ù)庫中查詢費(fèi)時(shí)費(fèi)力.那么必然是在后臺(tái)某個(gè)時(shí)候去其他的數(shù)據(jù)庫表中添加的,原來想把這方面也做了,但限于算法的不成熟和時(shí)間的限制.所以就用了隨機(jī)數(shù)來替換.)
*補(bǔ)充:
和google suggest還有一些差距,比如一直按著方向鍵問題和其他細(xì)節(jié)問題,這些都有待改進(jìn).
*效果圖:
限于文章長度控制只貼首頁和js代碼,其他代碼請(qǐng)?jiān)谙螺d包中查看
代碼如下:
<!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="手氣不錯(cuò)"/>
<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="";
}
}
}
打包文件下載
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
