// JavaScript Document
function onChangehoverLi(thisLi){
$("#searchtext").val($(thisLi).html());
$("#suggest_ul").hide(0);
validateform2();
}
$(function(){
// li
$("#suggest_ul").hide(0);
});
//Ajax
//
function fuzzySearch(){
// ajax
function createLink(){
if(window.ActiveXObject){
var newRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else{
var newRequest = new XMLHttpRequest();
}
return newRequest;
}
// ，
if($("#searchtext").val().length==0||$("#searchtext").val().length>10){
$("#suggest_ul").hide(0);
return;
}
//
http_request = createLink();// ajax
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");
//
http_request.onreadystatechange = dealresult; //
//
http_request.send(data);
}
//
function dealresult(){
if(http_request.readyState==4){
// 200
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);
}
}
}
}
//
$(function(){
// 300
$("#searchtext").keyup(function(){
setInterval(changehover,300);
function changehover(){
$("#suggest_ul li").hover(function(){ $(this).css("background","#eee");},function(){ $(this).css("background","#fff");});
}
});
});
ページ：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
</head>
<body>
<div id="searchSuggest">
<form action="deal.php" method="get" id="suggest_form">
<input type="text" id="searchtext" name="searchtext" autocomplete="off" value="search..." oninput="fuzzySearch();" onblur="if(this.value==''){this.value='search...'}" onfocus="if(this.value=='search...'){this.value=''}"/>
<input type="submit" value=" " id="suggest_submit" />
</form>
<ul id="suggest_ul">
</ul>
</div>
</body>
</html>
使用中に検索に行かない場合があります。iosシステムが持っている入力法で中国語を入力した場合は、onkeyupでもonchangeでもないです。ユーザが最初のボタンを押した仮想キーボードなので、onkeyupイベントが使えます。中国語が出たら、入力ボックスの中の値を中国語に変えます。onchangeはスクリプト変更の入力ボックスの値をキャプチャできません。最後の解決方法はoninput事件を使うので、これは最新のhttl 5の中の事件がとても良くて、ただいくつかの低いバージョンのブラウザーが互換できないのが比較的に面倒です。