ASP.NET+JS implementation of AJAX Sugguest Search hint effect _ practical skills

Effect Chart:


Function:
1, can have the direction of the key up and down control.
2, support keyword highlighting. (omitted in this code)
3, on the check can be submitted by return.

Use: Focus on Id=tbxsearch and id=search_suggest these two dongdong. The HTML part involves the localization question, handles oneself well, has the question to ask questions, the detail oneself grasps.

Note: In the receipt of the file, in fact, should receive a parameter skey, I first wrote dead. Remember to decode it first when you receive it.

affirms : Ahanan was modified according to an unknown source on the internet to fit his project and add more features. This release of code for the basic implementation code, but also the closest to the original code, omit other features. Copyright belongs to the original author.

Copy Code code as follows:

Document.writeln ("<div style=\" position:relative;margin-left:100px;margin-top:100px;\ ">");
document.write ("<input id= ' tbxsearch ' value= ' type= ' ' text ' maxlength= ' onkeyup= ' suggest ') '" (event,this) ' onblur= ' Inputonblur () ' \/> ');
document.write ("<div id=\" search_suggest\ "class=\" suggest\ "style=\" display:none;\ "><\/div><\/div" > ");
document.write ("<style 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;p adding: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 2px 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;
Here to write code to execute the search
};

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 here to perform the search
}

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 Code code 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 ("<keylit>");
Response.Write ("\t<key value=\" Ahanan has been adhering to their own road, "/>\n");
Response.Write ("\t<key value=\" Ahanan 25 years old this year!) \ "/>\n");
Response.Write ("\t<key value=\" Ahanan is now in Shantou!) \ "/>\n");
Response.Write ("\t<key value=\" Ahanan will return to Guangzhou!) \ "/>\n");
Response.Write ("\t<key value=\" Search bar is one of Ahanan's works during the university!) \ "/>\n");
Response.Write ("\t<key value=\" sosuo8.com by ahuinan\ "/>\n");
Response.Write ("</keylit>");

}
}
</script>

Package Download Http://xiazai.jb51.net/200904/yuanma/ajaxsuggest.rar