快捷導(dǎo)航

使用Bootstrap typeahead插件實(shí)現(xiàn)搜索框自動(dòng)補(bǔ)全的方法

更新時(shí)間：2016年07月07日 10:19:11 作者：夜無(wú)痕

這篇文章主要介紹了使用Bootstrap typeahead插件實(shí)現(xiàn)搜索框自動(dòng)補(bǔ)全的方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

這就是貼代碼的壞處之一：搜索框快被網(wǎng)友玩兒壞了?。?！有故意輸入空格的，有輸入or 1=1的，有alert的，有html亂入的.......而且好像還在玩兒，隨他們?nèi)グ?，只要開(kāi)心就好。

在項(xiàng)目中，經(jīng)常會(huì)用到輸入框的自動(dòng)補(bǔ)全功能，就像百度、淘寶等搜索框一樣：當(dāng)用戶(hù)輸入首字母、關(guān)鍵詞時(shí)，后臺(tái)會(huì)迅速將與此相關(guān)的條目返回并顯示到前臺(tái)，以便用戶(hù)選擇，提升用戶(hù)體驗(yàn)。當(dāng)然本項(xiàng)目的補(bǔ)全功能和這些大廠的技術(shù)是沒(méi)有可比性的，但用于站內(nèi)搜索也是綽綽有余了。

接觸到的自動(dòng)補(bǔ)全插件主要有兩個(gè)：autocomplete和typeahead。本站使用的是typeahead.

jQueryUI-Autocomplete

自動(dòng)補(bǔ)全插件-bootstrap-3-typeahead

相關(guān)參數(shù)說(shuō)明：

source：function(query,process){}。query表示當(dāng)前文本輸入框中的字符串，可在該方法中通過(guò)ajax向后臺(tái)請(qǐng)求數(shù)據(jù)（數(shù)組形式的json對(duì)象），然后將返回的對(duì)象作為process的參數(shù)；

formatItem：function(item){}。對(duì)返回?cái)?shù)據(jù)的具體某個(gè)json對(duì)象轉(zhuǎn)化為字符串格式，用以顯示在提示列表中，返回值：字符串；

setValue：function(item) {}。選中提示列表某項(xiàng)時(shí)，設(shè)置文本輸入框中顯示的值以及實(shí)際需要獲取的值。返回值格式：{'data-value':item["輸入框顯示值的 item屬性"],'real-value':item["實(shí)際需要獲取值的item屬性"]}，后期可通過(guò)文本輸入框的real-value屬性獲取該值；

items：自動(dòng)完成提示的最大結(jié)果集數(shù)量，默認(rèn)：8；

minLength：當(dāng)前文本輸入框中字符串達(dá)到該屬性值時(shí)才進(jìn)行匹配處理，默認(rèn)：1；

delay：指定延時(shí)毫秒數(shù)后，才正真向后臺(tái)請(qǐng)求數(shù)據(jù)，以防止輸入過(guò)快導(dǎo)致頻繁向后臺(tái)請(qǐng)求，默認(rèn)：500

具體代碼如下：

首先引入js文件

<script src="~/Scripts/jquery-1.9.0.js"></script> 
<script src="~/Scripts/bootstrap.js"></script> 
<script src="~/Content/js/bootstrap3-typeahead.js"></script>

Html代碼：

<form id="searchform" class="navbar-form navbar-right" role="search" target="_blank" method="get" action="/Search/Index">
<div class="form-group">
<input type="text" id="searchWords" name="searchWords" class="form-control" data-provide="typeahead" autocomplete="off" placeholder="請(qǐng)輸入要搜索關(guān)鍵詞">
</div>
<button type="submit" class="btn" id="searchbtn">
搜索
</button>
</form>

處理相關(guān)搜索詞的js：

//搜索自動(dòng)補(bǔ)全;給搜索框注冊(cè)自動(dòng)聯(lián)想完成事件
autoComplete: function () {
jQuery('#searchWords').typeahead({
source: function (query, process) {
//query是輸入值
jQuery.getJSON('/Search/GetHotSearchItems', { "query": query }, function (data) {
process(data);
});
},
updater: function (item) {
return item.replace(/<a(.+?)<\/a>/, ""); //這里一定要return，否則選中不顯示
},
afterSelect: function (item) {
//選擇項(xiàng)之后的時(shí)間，item是當(dāng)前選中的項(xiàng)
alert(item);
},
items: 8, //顯示8條
delay: 500 //延遲時(shí)間
});
},

后臺(tái)處理 /Search/GetHotSearchItems:

#region 2.0 jquery typeahead插件異步獲取搜索熱詞、自動(dòng)補(bǔ)全搜索框; ActionResult GetHotSearchItems()
/// <summary>
/// 2.0 jquery typeahead插件異步獲取搜索熱詞、自動(dòng)補(bǔ)全搜索框>
/// 每搜索一次就將此次用戶(hù)搜索的詳情入庫(kù)>
/// 定時(shí)任務(wù)每隔10分鐘統(tǒng)計(jì)一次各搜索詞的次數(shù)、將統(tǒng)計(jì)信息更新到SearchRank表
/// </summary>
/// <returns>JSON</returns>
public ActionResult GetHotSearchItems()
{
//2.1 先獲取當(dāng)前搜索詞"query"
string query = Request["query"];
//2.2 從數(shù)據(jù)庫(kù)中查詢(xún)此字段的熱詞集合
IBLL.ISearchRankService hotService = OperateHelper.Current.serviceSession.SearchRankService;
//2.3 從數(shù)據(jù)庫(kù)中檢索出包含此搜索詞的熱詞集合，并按搜索次數(shù)排序,將數(shù)據(jù)返回給typeahead.js
List<SearchRank> hotList = hotService.GetDataListBy(s => s.KeyWord.Contains(query), s => s.SearchTimes);
if (hotList != null)
{
var list1 = hotList.Select(h => new
{
name = h.KeyWord,
times = h.SearchTimes
}).ToList();
ArrayList list2 = new ArrayList();
int i = 1;
foreach (var item in list1)
{
list2.Add(string.Format("<a class=\"cat\" href=\"#\">{0}</a>{1}", i, item.name));
i++;
}
return Json(list2, JsonRequestBehavior.AllowGet);
}
else
{
return Json("", JsonRequestBehavior.AllowGet);
}
} 
#endregion

就先這樣吧。

您可能感興趣的文章: