Ajax sugguest search result implemented by asp.net + js

:


Function:
1. You can set up or down the direction keys.
2. Supports keyword highlighting. (Omitted in this Code)
3. Press enter to submit the selected items.

Use: Focus on id = tbxsearch and id = search_suggest. If the html part involves locating problems, you can handle the problem yourself. If you have any questions, you can ask questions and take the details into consideration.

Note: The file to be received should actually receive a skey parameter. I will write it to death first. Remember to decode it once before receiving it.

Statement: According to the unknown code of the original author on the net, ayunan modified the code to suit his project and added multiple functions. The Code released this time is the basic implementation code, which is also the closest to the original code. Other functions are omitted. Copyright belongs to the original author.
Copy codeThe Code is as follows:
Document. writeln ("<div style = \" position: relative; margin-left: 100px; margin-top: 100px; \ "> ");
Document. write ("<input id = 'tbxsearch' value ='' type = 'text' maxlength = '000000' onkeyup = 'suggest (event, this) 'onblur = 'inputonblur () '\/> ");
Document. write ("<div id = \" search_suggest \ "class = \" suggest \ "style = \" display: none; \ "> <\/div> ");
Document. write ("<style = \" text/css \ "> ");
Document. write ("body, input {font: 12px tahoma ;}");
Document. write ("# tbxsearch {width: 250px ;}");
Document. write (". suggest {position: absolute; + left: 6px; top: 23px; z-index: 999; background: # fff; width: 250px; text-align: left; border: 1px solid #000; height: auto! Important; height: 20px; min-height: 20px; clear: both ;}");
Document. write (". suggestOver {background: # 3366CC; padding: 2px 0 2px 0; color: white ;}");
Document. write ("<\/style> ");
Var $ = function (Id ){
Return document. getElementById (Id )? Document. getElementById (Id): null;
};
Var $ ctag = function (tagName ){
Return document. createElement (tagName );
};
Var $ ajax = function createXMLHttpRequest (){
Var xmlHttp = false;
Try {
XmlHttp = new XMLHttpRequest ();
}
Catch (trymicrosoft ){
Try {
XmlHttp = new ActiveXObject ("Msxml2.XMLHTTP ");
}
Catch (othermicrosoft ){
Try {xmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ")}
Catch (failed ){}
}
}
Return xmlHttp;
};

Var suggestDiv = $ ("search_suggest ");
Var keynodes;
Var lastKey = "";
Var selectedIndex = 0;
Var showSuggest = function (inputObj ){
Var xmlHttp = $ ajax ();
Var key = document. getElementById ("tbxsearch"). value;
If (key = lastKey) return false;
Else lastkey = key;
If (/^ \ s * $/. test (key )){
SuggestDiv. style. display = "none ";
Return false;
};
SelectedIndex =-1;
XmlHttp. open ("get", "js/search. aspx? Skey = "+ encodeURI (key) +" & t = "+ new Date (). getTime (), true );
XmlHttp. onreadystatechange = function (){
If (xmlHttp. readyState = 4 & xmlHttp. status = 200 ){
Var xmldoc = xmlHttp. responseXML;
Keynodes = xmldoc. getElementsByTagName ("key ");

If (keynodes. length> 0)
{
SuggestDiv. innerHTML = "";
For (var I = 0; I <keynodes. length; I ++ ){
Var keyDiv = $ ctag ("div ");
KeyDiv. style. width = "100% ";
KeyDiv. style. padding = "0 ";
KeyDiv. style. margin = "2px 0 2 p x 0 ";
KeyDiv. style. height = "18px ";
KeyDiv. style. lineHeight = "18px ";
KeyDiv. style. cursor = "default ";
KeyDiv. style. textIndent = "4px ";

KeyDiv. innerHTML = keynodes [I]. getAttribute ("value ");

KeyDiv. onmouseover = function (){
SelectedIndex =-1;
Divlist = suggestDiv. getElementsByTagName ("div ");
For (var k = 0; k <divlist. length; k ++ ){
Divlist [k]. className = "";
If (divlist [k] = this) selectedIndex = k;
}
This. className = "suggestOver ";
};

KeyDiv. onmouseout = function (){
This. className = "";
};

KeyDiv. onmousedown = function (){
Document. getElementById ("tbxsearch"). value = this. innerHTML;
// Write the code for executing the search here
};

SuggestDiv. appendChild (keyDiv );
};

SuggestDiv. style. display = "block ";
} Else {
SuggestDiv. style. display = "none ";
}
}
};
XmlHttp. send (null );
};
Var changeSelect = function (isUp, inputObj ){
If (isUp) selectedIndex ++;
Else selectedIndex --;
If (selectedIndex <0) selectedIndex = 0;
Var divlist = suggestDiv. getElementsByTagName ("div ");
If (selectedIndex> = divlist. length)
SelectedIndex = divlist. length-1;
For (var I = 0; I <divlist. length; I ++ ){
If (I = selectedIndex ){
Divlist [I]. className = "suggestOver ";
InputObj. value = divlist [I]. innerHTML. replace (/<[^>] +>/g ,"");
} Else {
Divlist [I]. className = "";
}
}
};
Var suggest = function (event, inputObj ){
Event = event? Event: (window. event? Window. event: null );
Var keyCode = event. keyCode;

If (keyCode = 13 ){
If (selectedIndex! =-1 ){
InputObj. value = keynodes [selectedIndex]. getAttribute ("value ");
}
// Write and execute the search here
}

If (keyCode = 40 | keyCode = 38 ){
Var isUp = false;
If (keyCode = 40) {isUp = true ;}
ChangeSelect (isUp, inputObj );
} Else {
ShowSuggest (inputObj );
}


};
Var inputOnblur = function () {setTimeout ('suggestdiv. style. display = "none"; ', 100 );};

Search. aspx code:
Copy codeThe Code is as follows:
<% @ Page Language = "C #" %>
<Script runat = "server">
Protected void Page_Load (object sender, EventArgs e)
{
If (! Page. IsPostBack)
{
Response. ContentType = "text/xml ";
Response. ContentEncoding = Encoding. GetEncoding ("UTF-8 ");
Response. Write ("<? Xml version = \ "1.0 \" encoding = \ "UTF-8 \"?> \ N ");
Response. Write ("<keypattern> ");
Response. Write ("\ t <key value = \" A connan has been sticking to his own path \ "/> \ n ");
Response. Write ("\ t <key value = \" A Yunnan is 25 years old! \ "/> \ N ");
Response. Write ("\ t <key value = \" A Huinan is in Shantou now! \ "/> \ N ");
Response. Write ("\ t <key value = \" A Huinan will return to Guangzhou! \ "/> \ N ");
Response. Write ("\ t <key value = \" search for it is one of the works of achinan during his college years! \ "/> \ N ");
Response. Write ("\ t <key value = \" sosuo8.com by ahuinan \ "/> \ n ");
Response. Write ("</keypattern> ");

}
}
</Script>

Package download http://xiazai.jb51.net/200904/yuanma/ajaxsuggest.rar