模拟一个类似百度google的模糊搜索下拉列表_javascript技巧
时间:2021-07-01 10:21:17
帮助过:12人阅读
代码如下:
// 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;ivar keywords = res[i].keywords;
contents=contents+""+keywords+"";
}
$("#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");});
}
});
});
页面:
代码如下: