快捷導(dǎo)航

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

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

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

首先來看一些效果圖:

這個是淘寶首頁的搜索效果

京東首頁的搜索效果

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

二、具體實現(xiàn)分析
首先呢因為具體數(shù)據(jù)時來自于數(shù)據(jù)庫,所以首先在數(shù)據(jù)庫中建立張表用于存放搜索歷史記錄，每次用戶查詢的其實就是數(shù)據(jù)庫中的表的記錄（也就是上次查詢這個關(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)鍵字，然后在搜索的存儲過程或者SQL語句中才進(jìn)行相應(yīng)的處理，當(dāng)用戶在頁面上輸入完關(guān)鍵字然后再點擊搜索此時需要首先根據(jù)關(guān)鍵字在數(shù)據(jù)庫中檢索相應(yīng)的數(shù)據(jù)，若此關(guān)鍵字有相關(guān)數(shù)據(jù)則向t_KeywordSearchHistory表新增一條數(shù)據(jù)（若此表中已有此關(guān)鍵字則更新搜索次數(shù)和符合關(guān)鍵字的記錄數(shù)）

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

 
--上面的是具體的SQL查詢代碼(統(tǒng)計符合關(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ù)庫方面的相關(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',//返回數(shù)據(jù)類型為XML 
minchar: 1,//最小響應(yīng)字符數(shù)量 
selectFirst:false,//默認(rèn)不選中第1條 
//格式化選項,由于WebService返回的數(shù)據(jù)是JSON格式,現(xiàn)在要轉(zhuǎn)成HTML以TABLE形式顯示 
formatItem:function(row,i,max){ 
var obj=eval("("+row+")");//將JSON轉(zhuǎn)換成對象 
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)選中時返回具體的值 
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格式模板,同時以換行符分隔,在JS腳本中會進(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(); 
} 

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

復(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)動作對象為空時還原用戶輸入的值 
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)不再列表時還原用戶輸入的值 
if (active < 0) { 
active = -1; 
input.value = oldValue; 
return; 
} 
//超出關(guān)鍵字列表時還原用戶輸入的值 
if (active >= listItems.size()) { 
active = -1; 
input.value = oldValue; 
return; 
} 
} 

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

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

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

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

您可能感興趣的文章: