使用Bootstrap typeahead插件实现搜索框自动补全的方法

<script src="/UploadFiles/2021-04-02/jquery-1.9.0.js">

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="请输入要搜索关键词">
</div>
<button type="submit" class="btn" id="searchbtn">
搜索
</button>
</form>


处理相关搜索词的js：


//搜索自动补全;给搜索框注册自动联想完成事件
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(.+""); //这里一定要return，否则选中不显示
},
afterSelect: function (item) {
//选择项之后的时间，item是当前选中的项
alert(item);
},
items: 8, //显示8条
delay: 500 //延迟时间
});
},


后台处理 /Search/GetHotSearchItems:


#region 2.0 jquery typeahead插件异步获取搜索热词、自动补全搜索框; ActionResult GetHotSearchItems()
/// <summary>
/// 2.0 jquery typeahead插件异步获取搜索热词、自动补全搜索框>
/// 每搜索一次就将此次用户搜索的详情入库>
/// 定时任务每隔10分钟统计一次各搜索词的次数、将统计信息更新到SearchRank表
/// </summary>
/// <returns>JSON</returns>
public ActionResult GetHotSearchItems()
{
//2.1 先获取当前搜索词"query"
string query = Request["query"];
//2.2 从数据库中查询此字段的热词集合
IBLL.ISearchRankService hotService = OperateHelper.Current.serviceSession.SearchRankService;
//2.3 从数据库中检索出包含此搜索词的热词集合，并按搜索次数排序,将数据返回给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


就先这样吧。