- 时间:2022-08-28 03:18 编辑: 来源: 阅读:
- 扫一扫,手机访问
摘要:asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
首先来看一些效果图:
[url=http://www.1sucai.cn/upload/201005/20100514175109604.jpg][img]http://files.jb51.net/upload/201005/20100514175113571.jpg[/img]
[/url]
这个是淘宝首页的搜索效果
[url=http://www.1sucai.cn/upload/201005/20100514175113992.jpg][img]http://files.jb51.net/upload/201005/20100514175113336.jpg[/img]
[/url]
京东首页的搜索效果
[url=http://www.1sucai.cn/upload/201005/20100514175113956.jpg][img]http://files.jb51.net/upload/201005/20100514175113685.jpg[/img]
[/url]
我修改的jQuery.AutoComplete实现的效果
一、实现效果分析
我要实现的效果就是和GOOGLE类似,需要满足一下3个要求(因为这样我认为是最好的用户体验,毕竟GOOGLE做了那么久了):
、首先根据关键字列出关键字相关的信息(包含统计信息)
、可以使用键盘上下键选择(默认不选中第一条),文本框内容根据选择信息变换
、当选择第一或者最后一条时再向上或向下则取消选中,文本框中内容还原回原先输入的内容(这点比较重要,京东这个就做不好,因为当在向上向下选择的过程中因为文本框内容会跟着换,所以就无法还原到当初用户所输入的内容了)
二、具体实现分析
首先呢因为具体数据时来自于数据库,所以首先在数据库中建立张表用于存放搜索历史记录,每次用户查询的其实就是数据库中的表的记录(也就是上次查询这个关键字的记录数)
[url=http://xiazai.jb51.net/201005/yuanma/jqueryautocomplete.rar]点我下载[/url]