文档章节

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

白与黑
 白与黑
发布于 2014/06/26 16:57
字数 856
阅读 57
收藏 0

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


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

请看DEMO

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

上面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

大家测试下上面这个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>

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

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

本文转载自:http://www.520ued.com/article/index/arcid/27.html

共有 人打赏支持
白与黑
粉丝 0
博文 1
码字总数 0
作品 0
海淀
程序员
jQuery+PHP打造网页搜索框功能

例如在百度上有个很使用的功能,就是用户在搜索的时候会自动提示相关搜索条件以供选择,非常人性化的设计,我们如何将此功能放到自己的项目中呢,经过一番研究,终于实现了此功能,分享给eve...

crossmix
2015/09/18
112
0
如何在WP7应用中手动关闭软键盘(翻译)

原文链接:http://windowsphonegeek.com/tips/How-to-hide-the-soft-keyboard-in-a-Windows-Phone-app 这篇文章我们谈谈如何监测当用户按下enter键后自动关闭Windows Phone 7的软键盘。 step...

junwong
2012/02/16
700
0
基于jquery实现的类似百度搜索的输入框自动完成功能

自动完成功能是指:类似百度搜索之类的输入一个词的一部分后就自动提示,然后用户可以选择,不需要再输入剩余部分。废话不多说,直观的看一下:   实现这个功能需要服务端配合。客户端通过...

凯文加内特
2014/06/25
0
3
关于keydown与keyup所犯过的一些小错误

昨天在写界面的时候,想实现一个功能,就是在文本框输入时,自动计算字数: 一开始,我的想法是这样的,给文本框添加个事件keydown,当点击键盘是,自动就算文本框里面字符的长度,这时候就出...

changelin
2014/07/14
0
0
LDMING/Textbox2

#Textbox2 目录 背景介绍 项目介绍 使用说明 获取代码 背景介绍 本人是一名asp.net开发人员,所在公司的项目大多是一些管理系统。 在开发这些管理系统时,经经常遇到以下问题。 1.这个表单项...

LDMING
2015/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 鱼生不值得

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @瘟神灬念:分享新裤子的单曲《没有理想的人不伤心 (Remix版)》: 《没有理想的人不伤心 (Remix版)》- 新裤子 手机党少年们想听歌,请使劲儿戳...

小小编辑
7分钟前
2
3
arts-week10

Algorithm 905. Sort Array By Parity - LeetCode Review Who’s Afraid of the Big Bad Preloader? 一文读懂前端缓存 一个网络请求3个步骤:请求,处理,响应,而前端缓存主要在请求处响应这两步...

yysue
今天
4
0
00.编译OpenJDK-8u40的整个过程

前言 历经2天的折腾总算把OpenJDK给编译成功了,要说为啥搞这个,还得从面试说起,最近出去面试经常被问到JVM的相关东西,总感觉自己以前学的太浅薄,所以回来就打算深入学习,目标把《深入理...

凌晨一点
今天
5
0
python: 一些关于元组的碎碎念

初始化元组的时候,尤其是元组里面只有一个元素的时候,会出现一些很蛋疼的情况: def checkContentAndType(obj): print(obj) print(type(obj))if __name__=="__main__": tu...

Oh_really
昨天
6
2
jvm crash分析工具

介绍一款非常好用的jvm crash分析工具,当jvm挂掉时,会产生hs_err_pid.log。里面记录了jvm当时的运行状态以及错误信息,但是内容量比较庞大,不好分析。所以我们要借助工具来帮我们。 Cras...

xpbob
昨天
174
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部