文章目录
- 一、bootstrap-suggest
- 1.1 功能说明
- 1.2 实现效果:
- 1.3 方法调用
- 1.4 事件监听
- 1.5 完整代码实现:
- 1.5.1 前端关键代码:
- 1.5.2 js代码:
- 1.5.3 Controller层:
- 配置参数如下:
- 使用bootstrap-suggest时的bug解决方案:
一、bootstrap-suggest
这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件,必须使用于按钮式下拉菜单组件上。
示例地址:http://lzw.me/pages/demo/bootstrap-suggest-plugin/demo/ 插件源码:https://github.com/veenter/bootstrap-suggest-plugin
1.1 功能说明
- 搜索方式:从 data.value 的有效字段数据中查询 keyword 的出现,或字段数据包含于 keyword 中
- 支持单关键字、多关键字的输入搜索建议,多关键字可自定义分隔符
- 支持按 data 数组数据搜索、按 URL 请求搜索和按首次请求URL数据并缓存搜索三种方式
- 单关键字会设置 data-id 和输入框内容两个值,以 indexId/idField 和 indexKey/idFiled 取值 data 的数据为准;多关键字只设置输入框值
1.2 实现效果:
1.3 方法调用
1、禁用提示: $("input#test").bsSuggest("disable");
2、启用提示: $("input#test").bsSuggest("enable");
3、销毁插件: $("input#test").bsSuggest("destroy");
4、查看版本:$("input#test").bsSuggest("version");
1.4 事件监听
1、onDataRequestSuccess: 当 AJAX 请求数据成功时触发,并传回结果到第二个参数
2、onSetSelectValue:当从下拉菜单选取值时触发,并传回设置的数据到第二个参数
3、onUnsetSelectValue:当设置了 idField,且自由输入内容时触发(与背景警告色显示同步)
4、onShowDropdown:下拉菜单显示时触发
5、onHideDropdown:下拉菜单隐藏式触发
1.5 完整代码实现:
1、引入 jQuery、bootstrap.min.css、bootstrap.min.js
2、引入插件js: bootstrap-suggest.min.js
1.5.1 前端关键代码:
1.5.2 js代码:
1.5.3 Controller层:
后面Service层和Dao层的代码就不写了,你看到Controller层这里应该就会了
配置参数如下:
提示:在 bootstrap v4 下, clearable 为 true 时,应引入 font-awesome 图标库,该清除按钮使用了 fa-plus 图标。
使用bootstrap-suggest时的bug解决方案