keyup模糊搜索提示框实现原理

最新推荐文章于 2024-06-25 16:30:48 发布

SalmonellaVaccine

最新推荐文章于 2024-06-25 16:30:48 发布

阅读量3k

点赞数

分类专栏： JavaScript Algorithm

JavaScript 同时被 2 个专栏收录

193 篇文章 0 订阅

订阅专栏

Algorithm

10 篇文章 0 订阅

订阅专栏

http://www.520ued.com/article/53881dccb992a7c43f5c2038

Author:owenhong2014-05-30

大家在使用百度，google搜索的时候，出现的模糊搜索框应该很有感触，因为确实很方便，不只是搜索引擎需要用到这个模糊搜索框的提示功能，想很多购物网站，如果淘宝，天猫，只要规模稍微大点的网站，由于内容较多的时候，都会有搜索功能，当然如果搜索功能能带模糊搜索提示框的话，我想对用户体验将会是很大的提高。怎么做才能高效的实现只一个功能呢，今天我就用jquery来给大家做这样一个功能。

首先我们来看一下大部分人会用的写法：

如果你觉得这种写法来实现这个功能，那就太不明智了，因为他非常的损耗性能，因为这个事件键盘弹起来的时候就会执行一次请求：

上面DEMO中当你们输入汉字的时候，文字拼音还没打完的时候，右边的提示框就已经开始执行你的请求了，这样一来，我们在打汉字的时候就文字还没打出来，就已经在执行ajax去服务器请求了，这样是极其损害性能的。

解决这个问题的办法我们可以给keyup事件加上一个延迟，等用户输入完一个完整的关键词的时候我们在进行请求，请看接下来的代码：


     
     var lastTime;
$("#search").keyup(function(event){
    //我们可以用jQuery的event.timeStamp来标记时间，这样每次的keyup事件都会修改lastTime的值，lastTime必需是全局变量
    lastTime = event.timeStamp;
    setTimeout(function(){
        //如果时间差为0，也就是你停止输入0.5s之内都没有其它的keyup事件产生，这个时候就可以去请求服务器了
        if(lastTime - event.timeStamp == 0){
            /*
             在这里可以执行ajax请求
             */
            var $val = $("#search").val();
            $("#tip").html($val);
        }
    },500);
});

大家测试下上面这个DEMO效果，在你输入完一个完整的词汇前他是不会发送请求的，其实上面的代码，不仅仅是靠setTimeout做了延迟，如果你写了延迟也是错的，因为他只是延迟了发送数据，即时你词汇打出来了之后，他还是会去执行kkkk这个数据的，关键的一个属性是jquery的event.timeStamp，我们来看下jquery api 提供的解释吧。

通过在代码中获得两个点之间的 event.timeStamp 值，并给出差值来分析事件的性能，此属性是很有用的。如果只是要确定当前的时间内的事件处理程序，使用(new Date).getTime()来代替。
注意: 有一个 bug open since 2004, 这个值是不正确填充在Firefox 它是不可能知道事件的时间，在该浏览器中创建。


     
     <!DOCTYPE html>
<html>
<head>
<style>
div { height: 100px; width: 300px; margin: 10px;
    background-color: #ffd; overflow: auto; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    <div>Click.</div>
    <script>
var last, diff;
$('div').click(function(event) {
    if ( last ) {
        diff = event.timeStamp - last
        $('div').append('time since last event: ' + diff + '<br/>');
    } else {
        $('div').append('Click again.<br/>');
    }
    last = event.timeStamp;
});
</script>
</body>
</html>