模拟一个类似百度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个日期间隔的示例代码

下一篇：关闭浏览器窗口弹出提示框并且可以控制其失效