微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

接触到的自动补全插件主要有两个

:autocomplete和typeahead

。本站使用的是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文件

rush:js;">

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐