快捷搜索:

使用jQuery.AutoComplete完成仿淘宝商品搜索功能(改进

着实这个已经是个对照常见的功能了,网上也有很多人做过这个了,然则很多都是仅仅做了一些基础的网页上自动完成功能,没有与详细的数据库进行联动,我本日所先容这个自动完成的便是我改动的jQuery.AutoComplete+数据库的一个办理规划

首先来看一些效果图:

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

京东首页的搜索效果

我改动的jQuery.AutoComplete实现的效果

一、实现效果阐发

我要实现的效果便是和GOOGLE类似,必要满意一下3个要求(由于这样我觉得是最好的用户体验,终究GOOGLE做了那么久了):

1、首先根据关键字列出关键字相关的信息(包孕统计信息)

2、可以应用键盘高低键选择(默认不选中第一条),文本框内容根据选择信息变换

3、被选择第一或者着末一条时再向上或向下则取消选中,文本框中内容还原回本来输入的内容(这点对照紧张,京东这个就做不好,由于当在向上向下选择的历程中由于文本框内容会随着换,以是就无法还原到当初用户所输入的内容了)

二、详细实现阐发

首先呢由于详细数据时来自于数据库,以是首先在数据库中建立张表用于寄放搜索历史记录,每次用户查询的着实便是数据库中的表的记录(也便是上次查询这个关键字的记录数)

CREATE TABLE [dbo].[t_KeywordSearchHistory] (

[Keyword] [nvarchar] (128) primary key, --关键字

[Count] [int] NOT NULL , --搜索次数

[RecordCount] [int] NOT NULL --相符关键字的记录数

)

上面的表仅仅用于寄放用户搜索的关键字,然后在搜索的存储历程或者SQL语句中才进行响应的处置惩罚,当用户在页面上输入完关键字然后再点击搜索此时必要首先根据关键字在数据库中检索响应的数据,若此关键字有相关数据则向t_KeywordSearchHistory表新增一条数据(若此表中已有此关键字则更新搜索次数和相符关键字的记录数)

--上面的是详细的SQL查询代码(统计相符关键字的商品数量

if @recordCount>0

begin

if @keyword

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

jQuery(function(){

jQuery("#txtKeyword").autocomplete("", {

httpMethod: "POST", //应用POST调用WebService

dataType: 'xml',//返回数据类型为XML

minchar: 1,//最小相应字符数量

selectFirst:false,//默认不选中第1条

//款式化选项,因为WebService返回的数据是JSON款式,现在要转成HTML以TABLE形式显示

formatItem:function(row,i,max){

var obj=eval("("+row+")");//将JSON转换成工具

var item="

"+obj.value+"

"+obj.num+"

";

return item;

},

//款式化结果,被选中时返回详细的值

formatResult:function(row,i,max){

var obj=eval("("+row+")");

return obj.value;

}

});

});

WebService代码:

[WebMethod()]

public string[] GetGoodsAutoComplete(string q)

{

List list = new List();

//JSON款式模板,同时以换行符分隔,在JS脚本中会进行处置惩罚

string template = "{{value:'{0}',num:'{1}'}}" + System.Environment.NewLine;//+”\n”

SqlCommand cmd = new SqlCommand();

SqlDataReader reader = null;

cmd.CommandText = "GetAutoComplete";

cmd.CommandType = CommandType.StoredProcedure;

cmd.Parameters.Add("@keyword", SqlDbType.NVarChar, 128).Value = q;

try {

reader = Tools.Data.SqlServerHelper.GetReader(VolkHelper.GetDBConnString(), cmd);

if (reader != null) {

while (reader.Read()) {

string s = string.Format(template, (string)reader("keyword"), "约" + (string)reader("num") + "件商品");

list.Add(s);

}

}

}

catch (Exception ex) {

}

return list.ToArray();

}

接下来便是我改动的jQuery.AutoComplete.js,因为代码太长,我在文章着末已经加了下载的链接以是就不把代码整个贴出来了,仅贴我改动的地方:

function moveSelect(step) {

listItems.slice(active, active + 1).removeClass(CLASSES.ACTIVE);

movePosition(step);

var activeItem = listItems.slice(active, active + 1).addClass(CLASSES.ACTIVE);

//当动作对象为空时还原用户输入的值

if (activeItem[0] != null || activeItem[0] != undefined) {

input.value = jQuery(activeItem[0]).find("td:first").text();

}

if (active >= 0) {

if (options.scroll) {

var offset = 0;

listItems.slice(0, active).each(function() {

offset += this.offsetHeight;

});

if ((offset + activeItem[0].offsetHeight - list.scrollTop()) > list[0].clientHeight) {

list.scrollTop(offset + activeItem[0].offsetHeight - list.innerHeight());

} else if (offset

//光标不再列表时还原用户输入的值

if (active

if (active >= listItems.size()) {

active = -1;

input.value = oldValue;

return;

}

}

已经684行开始:

next: function() {

if (active == -1) {

oldValue = input.value;//一开始将用户输入的值存入一个指定的变量

}

moveSelect(1);

},

prev: function() {

if (active == -1) {

oldValue = input.value;

}

moveSelect(-1);

},

以上就完成了自动完成的整个的必须前提了,假如对jQuery.Autocomplete不认识的话可以去这里看下详细的应用措施。我在这就不具体阐清楚明了。

附我改动的jQuery.AutoComplete.js下载:点我下载

转自:http://www.cnblogs.com/kyo-yo/archive/2010/05/14/My-jQuery-AutoComplete.html

您可能还会对下面的文章感兴趣: