快捷導(dǎo)航

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

更新時(shí)間：2014年04月15日 15:55:26 作者：

這篇文章主要介紹使用js模擬一個(gè)類似百度google的模糊搜索下拉列表,需要的朋友可以參考下

 
// JavaScript Document 
function onChangehoverLi(thisLi){ 
$("#searchtext").val($(thisLi).html()); 
$("#suggest_ul").hide(0); 
validateform2(); 
} 

$(function(){ 
//載入時(shí)隱藏下拉li 
$("#suggest_ul").hide(0); 
}); 

//Ajax 動(dòng)態(tài)獲取關(guān)鍵字 

//監(jiān)聽文本框輸入變化 

function fuzzySearch(){ 

//創(chuàng)建ajax對(duì)象函數(shù) 
function createLink(){ 
if(window.ActiveXObject){ 
var newRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
}else{ 
var newRequest = new XMLHttpRequest(); 
} 
return newRequest; 
} 

//如果文本框?yàn)榭?，不發(fā)送請(qǐng)求 
if($("#searchtext").val().length==0||$("#searchtext").val().length>10){ 
$("#suggest_ul").hide(0); 
return; 
} 
//發(fā)送請(qǐng)求 
http_request = createLink();//創(chuàng)建一個(gè)ajax對(duì)象 
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"); 

//指定一個(gè)函數(shù)來處理從服務(wù)器返回的結(jié)果 
http_request.onreadystatechange = dealresult; //此函數(shù)不要括號(hào) 
//發(fā)送請(qǐng)求 
http_request.send(data); 
} 

//處理返回結(jié)果 
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); 


} 
} 
} 

} 
//鼠標(biāo) 
$(function(){ 

//按下按鍵后300毫秒顯示下拉提示 
$("#searchtext").keyup(function(){ 
setInterval(changehover,300); 
function changehover(){ 
$("#suggest_ul li").hover(function(){ $(this).css("background","#eee");},function(){ $(this).css("background","#fff");}); 
} 
}); 

}); 

頁面：

復(fù)制代碼代碼如下:

 
<!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> 

使用的過程中發(fā)現(xiàn)一種情況不會(huì)去搜索，ios系統(tǒng)自帶的輸入法輸入中文的時(shí)候既不是onkeyup 也不是onchange事件，因?yàn)槭怯脩魟傞_始的按鈕是按的虛擬鍵盤，

可以使用onkeyup 事件，當(dāng)出現(xiàn)中文的時(shí)候點(diǎn)擊中文將輸入框里面的值改變成了中文，onchange不能捕獲腳本改動(dòng)的輸入框的值。

最后的解決辦法是用oninput事件，這個(gè)是最新的html5 中的事件非常好用，只是有些低版本的瀏覽器不能兼容比較麻煩。

您可能感興趣的文章: