Ajax sugguest search result implemented by asp.net + js

Source: Internet
Author: User

:

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.

Usage: 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 received should actually receive a skey parameter. I wrote it to death first. Remember to decode it once before receiving it.

Note: A kinnan made changes based on the unknown code of the original author on the net 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.