当前位置:Gxlcms > JavaScript > 模拟一个类似百度google的模糊搜索下拉列表_javascript技巧

模拟一个类似百度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");});
    }
    });

    });

    页面:
    代码如下:





    searchSuggest