使用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获取并操作iframe中元素的方法
Mar 21 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
Node.js Express安装与使用教程
May 11 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
javascript实现京东快递单号的查询效果
Nov 30 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
javascript 写类方式之九
2009/07/05 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
Python脚本实现格式化css文件
2015/04/08 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Python for循环与getitem的关系详解
2020/01/02 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
Python之多进程与多线程的使用
2021/02/23 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
车间操作工岗位职责
2013/12/19 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
暑期培训心得体会
2014/09/02 职场文书
外国人来华邀请函
2015/01/31 职场文书
工作自我评价范文
2019/03/21 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
golang import自定义包方式
2021/04/29 Golang
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
Python中time标准库的使用教程
2022/04/13 Python