快捷導(dǎo)航

asp.net下使用jQuery.AutoComplete完成仿淘寶商品搜索自動(dòng)完成功能(改進(jìn)了鍵盤上下選擇體驗(yàn))

更新時(shí)間：2010年05月14日 18:50:49 作者：

其實(shí)這個(gè)已經(jīng)是個(gè)比較常見(jiàn)的功能了，網(wǎng)上也有很多人做過(guò)這個(gè)了，但是很多都是僅僅做了一些基本的網(wǎng)頁(yè)上自動(dòng)完成功能，沒(méi)有與具體的數(shù)據(jù)庫(kù)進(jìn)行聯(lián)動(dòng)，我今天所介紹這個(gè)自動(dòng)完成的就是我修改的jQuery.AutoComplete+數(shù)據(jù)庫(kù)的一個(gè)解決方案。

首先來(lái)看一些效果圖:

這個(gè)是淘寶首頁(yè)的搜索效果

京東首頁(yè)的搜索效果

我修改的jQuery.AutoComplete實(shí)現(xiàn)的效果
一、實(shí)現(xiàn)效果分析
我要實(shí)現(xiàn)的效果就是和GOOGLE類似，需要滿足一下3個(gè)要求（因?yàn)檫@樣我認(rèn)為是最好的用戶體驗(yàn),畢竟GOOGLE做了那么久了)：
、首先根據(jù)關(guān)鍵字列出關(guān)鍵字相關(guān)的信息（包含統(tǒng)計(jì)信息）
、可以使用鍵盤上下鍵選擇（默認(rèn)不選中第一條），文本框內(nèi)容根據(jù)選擇信息變換
、當(dāng)選擇第一或者最后一條時(shí)再向上或向下則取消選中，文本框中內(nèi)容還原回原先輸入的內(nèi)容（這點(diǎn)比較重要，京東這個(gè)就做不好，因?yàn)楫?dāng)在向上向下選擇的過(guò)程中因?yàn)槲谋究騼?nèi)容會(huì)跟著換，所以就無(wú)法還原到當(dāng)初用戶所輸入的內(nèi)容了）

二、具體實(shí)現(xiàn)分析
首先呢因?yàn)榫唧w數(shù)據(jù)時(shí)來(lái)自于數(shù)據(jù)庫(kù),所以首先在數(shù)據(jù)庫(kù)中建立張表用于存放搜索歷史記錄，每次用戶查詢的其實(shí)就是數(shù)據(jù)庫(kù)中的表的記錄（也就是上次查詢這個(gè)關(guān)鍵字的記錄數(shù)）

復(fù)制代碼代碼如下:

CREATE TABLE [dbo].[t_KeywordSearchHistory] ( 
[Keyword] [nvarchar] (128) primary key, --關(guān)鍵字 
[Count] [int] NOT NULL , --搜索次數(shù) 
[RecordCount] [int] NOT NULL --符合關(guān)鍵字的記錄數(shù) 
) 

上面的表僅僅用于存放用戶搜索的關(guān)鍵字，然后在搜索的存儲(chǔ)過(guò)程或者SQL語(yǔ)句中才進(jìn)行相應(yīng)的處理，當(dāng)用戶在頁(yè)面上輸入完關(guān)鍵字然后再點(diǎn)擊搜索此時(shí)需要首先根據(jù)關(guān)鍵字在數(shù)據(jù)庫(kù)中檢索相應(yīng)的數(shù)據(jù)，若此關(guān)鍵字有相關(guān)數(shù)據(jù)則向t_KeywordSearchHistory表新增一條數(shù)據(jù)（若此表中已有此關(guān)鍵字則更新搜索次數(shù)和符合關(guān)鍵字的記錄數(shù)）

復(fù)制代碼代碼如下:

 
--上面的是具體的SQL查詢代碼(統(tǒng)計(jì)符合關(guān)鍵字的商品數(shù)量 
if @recordCount>0 
begin 
if @keyword <>'' 
begin 
if exists (select keyword from t_KeywordSearchHistory where keyword=@keyword) 
begin 
update t_KeywordSearchHistory set 
RecordCount=RecordCount+1, 
RecordCount=@recordCount 
where keyword=@keyword 
end 
else 
begin 
insert into t_KeywordSearchHistory values(@keyword,1,@recordCount) 
end 
end 
end 
else 
begin 
update t_KeywordSearchHistory set Count=Count+1, 
RecordCount=@recordCount 
where keyword=@keyword 
end 

完成了數(shù)據(jù)庫(kù)方面的相關(guān)代碼后就是界面上的,首先是jQuery.AutoComplete的調(diào)用方法:

復(fù)制代碼代碼如下:

jQuery(function(){ 
jQuery("#txtKeyword").autocomplete("<%=Me.Page.ResolveClientUrl("~/Service.asmx/AutoComplete") %>", { 
httpMethod: "POST", //使用POST調(diào)用WebService 
dataType: 'xml',//返回?cái)?shù)據(jù)類型為XML 
minchar: 1,//最小響應(yīng)字符數(shù)量 
selectFirst:false,//默認(rèn)不選中第1條 
//格式化選項(xiàng),由于WebService返回的數(shù)據(jù)是JSON格式,現(xiàn)在要轉(zhuǎn)成HTML以TABLE形式顯示 
formatItem:function(row,i,max){ 
var obj=eval("("+row+")");//將JSON轉(zhuǎn)換成對(duì)象 
var item="<table id='auto"+i+"' style='width:100%;'> 
<tr> 
<td align='left'>"+obj.value+"</td> 
<td align='right' style='color:green;'>"+obj.num+"</td> 
</tr> 
</table>"; 
return item; 
}, 
//格式化結(jié)果,當(dāng)選中時(shí)返回具體的值 
formatResult:function(row,i,max){ 
var obj=eval("("+row+")"); 
return obj.value; 
} 
}); 
}); 

WebService代碼:

復(fù)制代碼代碼如下:

[WebMethod()] 
public string[] GetGoodsAutoComplete(string q) 
{ 
List<string> list = new List<string>(); 
view sourceprint?01 //JSON格式模板,同時(shí)以換行符分隔,在JS腳本中會(huì)進(jìn)行處理 
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(); 
} 

接下來(lái)就是我修改的jQuery.AutoComplete.js，由于代碼太長(zhǎng)，我在文章最后已經(jīng)加了下載的鏈接所以就不把代碼全部貼出來(lái)了，僅貼我修改的地方：

復(fù)制代碼代碼如下:

function moveSelect(step) { 
listItems.slice(active, active + 1).removeClass(CLASSES.ACTIVE); 
movePosition(step); 
var activeItem = listItems.slice(active, active + 1).addClass(CLASSES.ACTIVE); 
//當(dāng)動(dòng)作對(duì)象為空時(shí)還原用戶輸入的值 
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 < list.scrollTop()) { 
list.scrollTop(offset); 
} 
} 
} 
}; 
function movePosition(step) { 
if (active < 0 && step == -1) { 
active = listItems.size()-1; 
return; 
} 
active += step; 
//光標(biāo)不再列表時(shí)還原用戶輸入的值 
if (active < 0) { 
active = -1; 
input.value = oldValue; 
return; 
} 
//超出關(guān)鍵字列表時(shí)還原用戶輸入的值 
if (active >= listItems.size()) { 
active = -1; 
input.value = oldValue; 
return; 
} 
} 

已經(jīng)684行開(kāi)始：

復(fù)制代碼代碼如下:

next: function() { 
if (active == -1) { 
oldValue = input.value;//一開(kāi)始將用戶輸入的值存入一個(gè)指定的變量 
} 
moveSelect(1); 
}, 
prev: function() { 
if (active == -1) { 
oldValue = input.value; 
} 
moveSelect(-1); 
}, 

以上就完成了自動(dòng)完成的全部的必須條件了，如果對(duì)jQuery.Autocomplete不熟悉的話可以去這里看下具體的使用方法。我在這就不詳細(xì)說(shuō)明了。
附我修改的jQuery.AutoComplete.js下載:點(diǎn)我下載

您可能感興趣的文章: