使用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 相关文章推荐
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
js实现时间日期校验
May 26 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的远程图片抓取函数分享
2013/09/25 PHP
php生成无限栏目树
2017/03/16 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
详解Django通用视图中的函数包装
2015/07/21 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
实习教师个人的自我评价
2013/11/08 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
工作证明英文模板
2014/10/21 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
疾病证明书
2015/06/19 职场文书
vue封装数字翻牌器
2022/04/20 Vue.js
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技