Fixed some detail code (support for persistent key events)
* Project Name: AJAX implementation class Google suggest effect
Author Paramecium (i.e. blue ECMA)
Contact caolvchong@gmail.com
* Time: 2007-7-7
* Tools: DreamWeaver (write ASP), Aptana (write javascript,html and CSS), EmEditor (write this article), Access2003 (database)
* Test Platform: firefox2.0,ie6.0,ie7.0
* Demo Address: http://finish.3322.org/suggest/index.htm (short term effective, on this machine, may access is not smooth)
* Original Address: http://cceer.xmu.edu.cn/blog/view.asp?id=55 (paste, use please specify)
*: File structure:
Index.htm: Home, show the effect
Ajax_result.asp:ajax Call background return result file
Result.asp: Search results file, this I did not do, the specific features according to the requirements to write
Database (Suggest.mdb):
ID: Automatic Numbering
Keyword: keywords
Seachtimes: number of times searched
Matchnum: Number of matching articles (a long time to think about this, how to get the number of articles, can not be a dynamic search, or in a huge database query time-consuming and laborious. Then it must be in the background some time to add to other database tables, the original want to do this, But limited to the immaturity of the algorithm and the time limit. So we used random numbers to replace.
Added
There are still some gaps with Google suggest, such as pressing key issues and other details, which need to be improved.
* Effect Chart:
Limited to article length control only paste home and JS code, other code please check in the download package
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" C/>
<title> paramecium---Easy Google suggest</title>
<link type= "Text/css" rel= "stylesheet" href= "Suggest.css"/>
<script type= "Text/javascript" src= "Suggest.js" ></script>
<body >
<form action= "result.asp" method= "post" name= "search" autocomplete= "off" >
<input type= "text" name= "keyword" id= "keyword"/>
<input type= "Submit" value= "Good luck"/>
<div id= "Suggest" ></div>
</form>
</body>
Suggest.js
Copy Code code as follows:
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= "";
}
}
}
Package file Download
