Simulate a fuzzy search drop-down list similar to Baidu Google_javascript skills

Copy code 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 when loading
$("#suggest_ul").hide(0);
});

/ /Ajax dynamically obtains keywords

//Listen to text box input changes

function fuzzySearch(){

//Create 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, do not send the request
if($("#searchtext").val().length==0||$(" #searchtext").val().length>10){
$("#suggest_ul").hide(0);
return;
}
//Send 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 results returned from the server
http_request.onreadystatechange = dealresult; //No brackets are required for this function
//Send request
http_request.send(data);
}

//Process the return result
function dealresult(){
if(http_request.readyState== 4){
//Equal to 200 means success
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;ivar keywords = res[i].keywords;
contents=contents "

" keywords "

";

}
$("# suggest_ul").html(contents);


}
}
}

}
//Mouse
$(function(){

//Display the drop-down prompt 300 milliseconds after pressing the key
$("#searchtext").keyup(function(){
setInterval(changehover,300);
function changehover() {
$("#suggest_ul li").hover(function(){ $(this).css("background","#eee");},function(){ $(this).css(" background","#fff");});
}
});

});

Page:

Copy code The code is as follows:

> ;

ul>

During the process of using it, I found a situation where I would not search. The input method that comes with the iOS system when inputting Chinese is neither an onkeyup nor an onchange event, because the user first pressed the button on the virtual keyboard.

You can use the onkeyup event. When Chinese appears, click Chinese to change the value in the input box to Chinese. Onchange cannot capture the value of the input box changed by the script.

The final solution is to use the oninput event. This event is very easy to use in the latest HTML5, but it is troublesome that some lower version browsers are not compatible.