视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
模拟一个类似百度google的模糊搜索下拉列表_javascript技巧
2020-11-27 21:21:56 责编:小采
文档


代码如下:
// 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












    使用的过程中发现一种情况不会去搜索,ios系统自带的输入法输入中文的时候既不是onkeyup 也不是onchange事件,因为是用户刚开始的按钮是按的虚拟键盘,

    可以使用onkeyup 事件,当出现中文的时候点击中文将 输入框里面的值改变成了中文,onchange不能捕获脚本改动的输入框的值。

    最后的解决办法是 用oninput事件,这个是最新的html5 中的事件非常好用,只是有些低版本的浏览器不能兼容比较麻烦。

    下载本文
    显示全文
    专题