模拟一个类似百度google的模糊搜索下拉列表

前端技术 2023/09/03 JavaScript
复制代码 代码如下:

// 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 中的事件非常好用，只是有些低版本的浏览器不能兼容比较麻烦。

本文地址：https://www.stayed.cn/item/8141

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案