*項目名稱:AJAX實作類別Google Suggest效果
*作者:草履蟲
*聯絡:caolvchong@gmail.com
*時間:2007-7-7
*起因:
建發實習面試時有提到這個問題,回來就考慮去實踐一下,結果花了不少時間.主要是javascript在前台的表現問題,資料庫結構設計等.網上有少數的幾個dom教程,沒有值得借鑒的地方,而<<征服Ajax web2.0開發技術詳解>>中第16章搜尋提示(suggest)中那個例子實在是簡陋(當然是說javascript表現部分),而且資料庫用MSSQL,後台語言用JSP,和自己熟悉的格格不入(雖然都是以後要接觸的),所以自己動手了.模仿效果:Google Suggest
*開發平台:Windows2003 IIS6.0 Access資料庫
*工具: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: 匹配的文章數目(關於這個方面想了蠻久,如何取得文章數呢,不能是搜尋時動態產生,不然在偌大資料庫中查詢費時費力.那麼必然是在後台某個時候去其他的資料庫表中添加的,原來想把這方面也做了,但限於演算法的不成熟和時間的限制.所以就用了隨機數來替換.)
*開發過程遇到問題:
1.CSS方面:遇到了IE雙倍浮動邊界Bug(float:left下的margin-left是設定的兩倍,用display:inline消除)
2.javascript方面:
一個是那個全域變數j的上下界問題著實讓我亂了一會,還好理清了思路
按鍵事件的相容性問題:IE的keyCode,其他瀏覽器的which事件
onkeypress和onkeyup,onkeydown事件的區別:onkeypress只接受數字和字母,不接受系統按鍵(如上下
方向鍵)
使用submit()方法時不能定義某個標籤的id或name為submit,不然將提示缺少對象
還有一些細節判斷問題,也讓我費了不少神
3.html方面:
如何讓表單不記憶(在firefox下自動記憶會擋主ajax部分,而google中就沒有這樣的提示功能,所以去掉了表單記憶功能),只要在form中加一個autocomplete="off"
*補充:
和google suggest還有一些差距,比如一直按著方向鍵問題和其他細節問題,這些都有待改進.
*:
限於文章長度,只帖首頁和js,其他的去附件下載:
草履蟲--仿googlesuggest.rar
首頁:index.htm
<!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" content="text/html; charset=GB2312" />
<title>草履蟲---簡易Google Suggest</title>
<link type="text/css" rel="stylesheet" href="suggest.css"/>
<script type="text/javascript" src="suggest.js"></script>
</head>
<body onclick="hide_suggest();">
<img src="suggest.gif" onclick="hide_suggest();" />
<form action="result.asp" method="post" name="search" autocomplete="off">
<!--input type="text" name="keyword" id="keyword" onkeyup="keydeal(event);" onclick="keydeal(event);"/-->
<input type="text" name="keyword" id="keyword" onkeyup="keyupdeal(event);" onkeydown="keydowndeal(event);" onclick="keyupdeal(event);"/>
<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 keyupdeal(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;}}function set_style(num){for(var i=0;i<$$("li").length;i++){var li_node=$$("li")[i];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.childNodesfor(var i=0;i<$$("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;}}}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
