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

转载 2016年06月02日 00:58:46

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


2014-05-30


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

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

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

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

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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div { height: 100px; width: 300px; margin: 10px;
  6.     background-color: #ffd; overflow: auto; }
  7. </style>
  8. <script src="http://code.jquery.com/jquery-latest.js"></script>
  9.     </head>
  10.     <body>
  11.     <div>Click.</div>
  12.     <script>
  13. var last, diff;
  14. $('div').click(function(event) {
  15.     if ( last ) {
  16.         diff = event.timeStamp - last
  17.         $('div').append('time since last event: ' + diff + '<br/>');
  18.     } else {
  19.         $('div').append('Click again.<br/>');
  20.     }
  21.     last = event.timeStamp;
  22. });
  23. </script>
  24. </body>
  25. </html>


只要理解了Jquery里面的这个event.timeStamp的用法,理解这个功能的实现方法就没什么问题了。

转载请注明来自 520UEDhttp://www.520ued.com/article/53881dccb992a7c43f5c2038


自动补全(智能提示)原理与实现

自动补全,英文叫autocomplete,好像也叫智能提示,就是用户在输入框敲一个字符会弹出下拉列表提示候选词给用户,方便用户输入,提升用户体验。              网上多...
  • lgnlgn
  • lgnlgn
  • 2013年04月17日 21:46
  • 8534

jquery自动填充input框(如百度搜索一样,出现模糊提示)

jquery自动填充input框(如百度搜索一样),出现模糊提示
  • high2011
  • high2011
  • 2016年03月06日 14:12
  • 4073

输入框输入模糊查询匹配/提醒

项目目的:实现一个输入框输入之后能够进行模糊查询匹配;这样给输入者提醒和匹配 项目的实现方式: 首先检测输入框的内容变化,然后ajax请求把数据传到后台,通过查询匹配;最后就是数据的展示; 问题难点:...
  • yuanyuan214365
  • yuanyuan214365
  • 2017年03月18日 15:37
  • 2866

输入框输入模糊查询匹配/提醒

项目目的:实现一个输入框输入之后能够进行模糊查询匹配;这样给输入者提醒和匹配 项目的实现方式: 首先检测输入框的内容变化,然后ajax请求把数据传到后台,通过查询匹配;最后就是数据的展示; 问题难点:...
  • yuanyuan214365
  • yuanyuan214365
  • 2017年03月18日 15:37
  • 2866

实现类似百度搜索框中模糊提示功能

通常,在我们使用百度的时候,在输入框中输入某一个字段的时候,就可以查询到相关的信息。类似的功能可以通过JS的框架来实现(显然不会像百度那么强大)。jquery提供了一种扩展插件。可以实现获取文本框内容...
  • qq_27603235
  • qq_27603235
  • 2016年07月14日 12:48
  • 3584

编写简易的JS输入框模糊查询匹配(附有源码和demo)

http://www.cnblogs.com/tugenhua0707/p/3434730.html 前言:JS输入框模糊匹配插件以前在工作写过一个类似的 所以这次写轻松很多,这次写优化...
  • SalmonellaVaccine
  • SalmonellaVaccine
  • 2016年05月30日 12:15
  • 4403

模糊搜索下拉提示框

  • 2017年05月25日 17:34
  • 3KB
  • 下载

jquery模糊提示框

  • 2014年10月30日 15:57
  • 52KB
  • 下载

bootstrap+autocomplete高仿百度搜索下拉提示框实现自动完成搜索结果源代码下载

  • 2017年07月20日 15:17
  • 25.19MB
  • 下载

使用AutoCompleteExtender实现搜索下拉提示框,读取数据库内容

转自:http://tech.ddvip.com/2009-03/1237358650111667.html 当我们输入的时候,下面出现搜索提示,下面我们来说一下实现的过程;  必备条件,如果你没有安...
  • lJean
  • lJean
  • 2011年05月25日 16:32
  • 1402
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:keyup模糊搜索提示框实现原理
举报原因:
原因补充:

(最多只允许输入30个字)