Ajax Smart Search

<% @ Control Language = "C #" AutoEventWireup = "true" CodeFile = "Search. ascx. cs" Inherits = "UserControls_Search" %>
<Style>

# Search_suggest
{
Position: absolute;
Background: # FFFFFF;
Text-align: left;
Border: 1px #000000 solid;
Cursor: pointer;
Display: none;
Z-index: 10;
Width: 251px;
}

. Suggest_link_over
{
Background-color: # e8f2fe;
Padding: 2px 6px;
Font-weight: bold;
Color: red;
Cursor: pointer;
Display: block;
}
. Suggest_link
{
Padding: 2px 6px;
Background-color: # FFFFFF;
}

</Style>

<Script language = "javascript" type = "text/javascript">

// Create an Aajx object
Function createXmlHttpRequest (){
Var xmlhttp = null;
Try {
Xmlhttp = XMLHttpRequest ();
} Catch (e1 ){
Try {
Xmlhttp = new ActiveXObject ("MSXML2.XMLHTTP ");
} Catch (e2 ){
Try {
Xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (e3 ){
Xmlhttp = false;
Alert ("creation failed! ");
}
}
}
Return xmlhttp;
}

Var xmlHttp = createXmlHttpRequest ();

// Delete the white space before and after the string
Function Trim (strToString)
{
Return strToString. replace (/^ \ s */, ''). replace (/\ s * $ /,'');
}

// When the input box changes
Function change_key (){
If (xmlHttp. readyState = 4 | xmlHttp. readyState = 0 ){
Var str = Trim (escape (document. getElementById ("keyword"). value ));

If (str! = ''){
XmlHttp. open ("get", "AjaxSearch. aspx? Key = "+ str, true );
XmlHttp. onreadystatechange = handSearchRequest;
XmlHttp. send (null );
}
}
}

// Receive objects and separate them from "|"
Function handSearchRequest (){
If (xmlHttp. readyState = 4 ){
Var div = document. getElementById ("search_suggest ");
Div. innerHTML = "";
Var str = xmlHttp. responseText. split ("| ");
$ ("Search_suggest"). innerHTML = "";
For (var I = 0; I <str. length; I ++ ){
Var suggest = '<div onmouseover = "javascript: suggestOver (this );"';
Suggest + = 'onmouseout = "javascript: suggestOut (this );"';
Suggest + = 'onclick = "javascript: setSearch (this. innerHTML );"';
Suggest + = 'class = "suggest_link"> '+ str [I] +' </div> ';
 
$ ("Search_suggest"). innerHTML + = suggest;

}
$ ("Search_suggest"). style. display = "block ";

$ ("Search_suggest"). innerHTML + = "<div class = 'C' onclick = 'C _ close () '> Close It </div> ";
Mka_1 ();

}
}

// Close the input box
Function c_close (){
$ ("Search_suggest"). style. display = "none ";
}

Function Mka_1 (){
E = $ ("keyword ");
Var t = e. offsetTop;
Var l = e. offsetLeft;
While (e = e. offsetParent ){
T + = e. offsetTop;
L + = e. offsetLeft;
}
$ ("Search_suggest"). style. top = t + 20;
$ ("Search_suggest"). style. left = l;
}

Function $ (d)
{
Return document. getElementById (d );
}

Function setSearch (div_value ){
Document. getElementById ("keyword"). value = div_value;
$ ("Search_suggest"). style. display = "none ";
}

Function suggestOver (div_value ){
Div_value.className = 'suggest _ link_over ';
}

Function suggestOut (div_value ){
Div_value.className = 'suggest _ link ';
}
Function B _hide ()
{
// $ ("Search_suggest"). style. display = "none ";
}

</Script>

<Div id = "sp" style = "margin-left: 20px;">
<Input name = "keyword" type = "text" class = "srchTxt" id = "keyword" value = "" size = "35" maxlength = "256" autocomplete = "off "onkeyup =" change_key () "onblur =" B _hide () "/>

<Input type = "image" name = "imageField" src = "http://images.cnblogs.com/search.gif"/>

<Div id = "search_suggest"> </div>
</Div>