Simulate a fuzzy search drop-down list similar to Baidu and google _ javascript tips-js tutorial

This article describes how to use js to simulate a fuzzy search drop-down list similar to Baidu or google. For more information, see The Code is as follows:

// JavaScript Document
Function onChangehoverLi (thisLi ){
$ ("# Searchtext" ).val(((thisli).html ());
$ ("# Suggest_ul"). hide (0 );
Validateform2 ();
}

$ (Function (){
// Hide the drop-down li
$ ("# Suggest_ul"). hide (0 );
});

// Ajax dynamic keyword acquisition

// Listen for text box input changes

Function fuzzySearch (){

// Create an ajax Object Function
Function createLink (){
If (window. ActiveXObject ){
Var newRequest = new ActiveXObject ("Microsoft. XMLHTTP ");
} Else {
Var newRequest = new XMLHttpRequest ();
}
Return newRequest;
}

// If the text box is empty, no request is sent.
If ($ ("# searchtext"). val (). length = 0 | $ ("# searchtext"). val (). length> 10 ){
$ ("# Suggest_ul"). hide (0 );
Return;
}
// Send the request
Http_request = createLink (); // create an ajax object
If (http_request ){
Var sid = $ ("# searchtext"). val ();
Var url = "contentSearchAction! GetSynonyms. action ";
Var data = "keywords =" + encodeURI (sid );
// Alert (data)
Http_request.open ("post", url, true );
Http_request.setRequestHeader ("content-type", "application/x-www-form-urlencoded ");

// Specify a function to process the returned results from the server
Http_request.onreadystatechange = dealresult; // do not enclose this function.
// Send the request
Http_request.send (data );
}

// Process the returned results
Function dealresult (){
If (http_request.readyState = 4 ){
// If the value is 200, the request is successful.
If (http_request.status = 200 ){
If (http_request.responseText = "no "){
$ ("# Suggest_ul"). hide (0 );
Return;

}
$ ("# Suggest_ul"). show (0 );
Var res = eval ("(" + http_request.responseText + ")");
Var contents = "";
For (var I = 0; I Var keywords = res [I]. keywords;
Contents = contents +"

"+ Keywords +"

";

}
$ ("# Suggest_ul" pai.html (contents );


}
}
}

}
// Mouse
$ (Function (){

// The drop-down prompt is displayed in 300 milliseconds after the button is pressed.
$ ("# Searchtext"). keyup (function (){
SetInterval (changehouse, 300 );
Function changehover (){
$ ("# Suggest_ul li "). hover (function () {detail (this).css ("background", "# eee") ;}, function () {detail (this).css ("background", "# fff ");});
}
});

});

Page:

The Code is as follows:

SearchSuggest