模擬一個類似百度google的模糊搜索下拉列表

2019-11-20 20:49:34

字體：大中小

來源：轉載

供稿：網友

 
// 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事件，這個是最新的html5 中的事件非常好用，只是有些低版本的瀏覽器不能兼容比較麻煩。

上一篇：JS比較2個日期間隔的示例代碼

下一篇：關閉瀏覽器窗口彈出提示框并且可以控制其失效