登录  /  注册
首页 > web前端 > js教程 > 正文
模拟一个类似百度google的模糊搜索下拉列表_javascript技巧
php中文网
发布: 2016-05-16 16:52:27
原创
1105人浏览过
复制代码 代码如下:

// 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 中的事件非常好用,只是有些低版本的浏览器不能兼容比较麻烦。
    相关标签:
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

     | 本站CDN由 数掘科技 提供

    登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学