【asp】asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)-net-AutoComplete-自动完成

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)】，下面是详细的讲解！

asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

首先来看一些效果图:

这个是淘宝首页的搜索效果

京东首页的搜索效果

我修改的jQuery.AutoComplete实现的效果
一、实现效果分析
我要实现的效果就是和GOOGLE类似，需要满足一下3个要求（因为这样我认为是最好的用户体验,毕竟GOOGLE做了那么久了)：
、首先根据关键字列出关键字相关的信息（包含统计信息）
、可以使用键盘上下键选择（默认不选中第一条），文本框内容根据选择信息变换
、当选择第一或者最后一条时再向上或向下则取消选中，文本框中内容还原回原先输入的内容（这点比较重要，京东这个就做不好，因为当在向上向下选择的过程中因为文本框内容会跟着换，所以就无法还原到当初用户所输入的内容了）

二、具体实现分析
首先呢因为具体数据时来自于数据库,所以首先在数据库中建立张表用于存放搜索历史记录，每次用户查询的其实就是数据库中的表的记录（也就是上次查询这个关键字的记录数）

上面的表仅仅用于存放用户搜索的关键字，然后在搜索的存储过程或者SQL语句中才进行相应的处理，当用户在页面上输入完关键字然后再点击搜索此时需要首先根据关键字在数据库中检索相应的数据，若此关键字有相关数据则向t_KeywordSearchHistory表新增一条数据（若此表中已有此关键字则更新搜索次数和符合关键字的记录数）

完成了数据库方面的相关代码后就是界面上的,首先是jQuery.AutoComplete的调用方法:

WebService代码:

接下来就是我修改的jQuery.AutoComplete.js，由于代码太长，我在文章最后已经加了下载的链接所以就不把代码全部贴出来了，仅贴我修改的地方：


已经684行开始：

以上就完成了自动完成的全部的必须条件了，如果对jQuery.Autocomplete不熟悉的话可以去这里看下具体的使用方法。我在这就不详细说明了。
附我修改的jQuery.AutoComplete.js下载:点我下载

关于asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)的用户互动如下：

　　相关问题：

　　答： >>详细

　　相关问题：

　　答： >>详细

　　相关问题：

　　答： >>详细