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


Posted in Javascript onJuly 07, 2016

这就是贴代码的坏处之一:搜索框快被网友玩儿坏了!!!有故意输入空格的,有输入or 1=1的,有alert的,有html乱入的.......而且好像还在玩儿,随他们去吧,只要开心就好。

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

在项目中,经常会用到输入框的自动补全功能,就像百度、淘宝等搜索框一样:当用户输入首字母、关键词时,后台会迅速将与此相关的条目返回并显示到前台,以便用户选择,提升用户体验。当然本项目的补全功能和这些大厂的技术是没有可比性的,但用于站内搜索也是绰绰有余了。

接触到的自动补全插件主要有两个:autocomplete和typeahead。本站使用的是typeahead.

jQueryUI-Autocomplete

自动补全插件-bootstrap-3-typeahead

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

相关参数说明:

source:function(query,process){}。query表示当前文本输入框中的字符串,可在该方法中通过ajax向后台请求数据(数组形式的json对象),然后将返回的对象作为process的参数;

formatItem:function(item){}。对返回数据的具体某个json对象转化为字符串格式,用以显示在提示列表中,返回值:字符串;

setValue:function(item) {}。选中提示列表某项时,设置文本输入框中显示的值以及实际需要获取的值。返回值格式:{'data-value':item["输入框显示值的 item属性"],'real-value':item["实际需要获取值的item属性"]},后期可通过文本输入框的real-value属性获取该 值;

items:自动完成提示的最大结果集数量,默认:8;

minLength:当前文本输入框中字符串达到该属性值时才进行匹配处理,默认:1;

delay:指定延时毫秒数后,才正真向后台请求数据,以防止输入过快导致频繁向后台请求,默认: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="请输入要搜索关键词">
</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(.+?)<\/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

就先这样吧。

Javascript 相关文章推荐
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
Angular2安装angular-cli
May 21 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 #Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 #Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 #Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 #Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 #Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 #Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 #Javascript
You might like
由php的call_user_func传reference引发的思考
2010/07/23 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
javascript的事件描述
2006/09/08 Javascript
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
Python 基础教程之str和repr的详解
2017/08/20 Python
解析Python3中的Import
2019/10/13 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
python2和python3哪个使用率高
2020/06/23 Python
什么是Python包的循环导入
2020/09/08 Python
Python解析微信dat文件的方法
2020/11/30 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
补充协议书
2015/01/28 职场文书
二审答辩状范文
2015/05/22 职场文书
退休欢送会主持词
2015/07/01 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers