Fixed some code details (supporting continuous key events)
* Project name: AJAX implementation class Google Suggest Effect
* Author: grass insects (that is, the 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, and IE7.0
* Demo address: http://finish.3322.org/suggest/index.htm (short term valid, on the local machine, possible access not smooth)
* Address: http://cceer.xmu.edu.cn/blog/view.asp? Id = 55 (post, please note)
*: File structure:
Index.htm: homepage, display results
Ajax_result.asp: ajax call background return result File
Result. asp: the search result file, which I did not do. The specific functions are written as needed.
Database (suggest. mdb ):
Id: Automatic id
Keyword: keyword
Seachtimes: Number of times searched
Matchnum. so it must be added to other database tables in the background at some time. I originally wanted to do this, but it was limited to the immature algorithm and time constraints. so we use a random number to replace it .)
* Supplement:
There are still some gaps with google suggest, such as the issue of always following the direction keys and other details, which need to be improved.
*:
Limited to Article Length Control, only post the homepage and js Code. For other code, see the downloaded package.
Copy codeThe Code is as follows: <! 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> crawler --- simple Google Suggest </title>
<Link type = "text/css" rel = "stylesheet" href = "suggest.css"/>
<Script type = "text/javascript" src = "suggest. js"> </script>
</Head>
<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>
</Html>
Suggest. js Copy codeThe Code is 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