Copy Code code as follows:
JavaScript Document
function Onchangehoverli (THISLI) {
$ ("#searchtext"). Val ($ (THISLI). html ());
$ ("#suggest_ul"). Hide (0);
Validateform2 ();
}
$ (function () {
Hide drop down Li when loading
$ ("#suggest_ul"). Hide (0);
});
Ajax Dynamic Get keyword
Listening for text box input changes
function Fuzzysearch () {
Creating Ajax Object Functions
function Createlink () {
if (window. ActiveXObject) {
var newrequest = new ActiveXObject ("Microsoft.XMLHTTP");
}else{
var newrequest = new XMLHttpRequest ();
}
return newrequest;
}
If the text box is empty, the request is not sent
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 handle the results returned from the server
Http_request.onreadystatechange = Dealresult; This function does not have parentheses
Send Request
Http_request.send (data);
}
Processing return results
function Dealresult () {
if (http_request.readystate==4) {
Equal to 200 indicates 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;i<res.length;i++) {
var keywords = res[i].keywords;
contents=contents+ "<li onclick=" Onchangehoverli (this); ' class= ' suggest_li ' + (i+1) + "' > ' +keywords+" </li > ";
}
$ ("#suggest_ul"). HTML (contents);
}
}
}
}
Mouse
$ (function () {
300 milliseconds to display Drop-down prompts 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 code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>searchSuggest</title>
<link href= "Css/searchsuggest.css" type= "Text/css" rel= "stylesheet" >
<script type= "Text/javascript" src= "Js/jquery-1.7.1.js" ></script>
<script type= "Text/javascript" src= "Js/searchsuggest.js" ></script>
<style>
#suggest_ul {
width:100%;
max-height:223px;
margin:0px;
padding:0px;
border:1px solid #ccc;
Background-color: #ffffff;
List-style-type:none;
}
#suggest_ul li{
padding-left:5px;
line-height:22px;
font-size:13px;
width:100%;
height:22px;
Cursor:default;
}
</style>
<body>
<div id= "Searchsuggest" >
<form action= "deal.php" method= "Get" id= "Suggest_form" >
<input type= "text" id= "SearchText" name= "SearchText" Off "autocomplete=" search ... "value=" oninput= (); " Onblur= ' if (this.value== ') {this.value= ' search ... '} ' onfocus= ' if (this.value== ' search ... ') {this.value= '} '/>
<input type= "Submit" value= "search" id= "Suggest_submit"/>
</form>
<ul id= "Suggest_ul" >
</ul>
</div>
</body>
The use of the process found that a situation does not go to search, the iOS system with input input in Chinese is neither onkeyup nor onchange event, because the user just started the button is the virtual keyboard,
You can use the OnKeyUp event and click Chinese to change the value in the input box to Chinese in Chinese, onchange cannot capture the value of the input box for the script change.
The final solution is to use the Oninput event, which is very useful in the latest HTML5 events, except that some versions of browsers are not compatible.
