bootstrap-suggest

bootstrap-suggest这是一个基于bootstrap按钮式下拉菜单组件的搜索建议插件

代码演示参考 若依系统 → 实例演示 → 表单元素 → 搜索自动补全 form/autocomplete.html（项目使用需要引入js）

<th:block th:include="include :: bootstrap-suggest-js" />

// suggest 常用方法
$("input#test").bsSuggest("disable");    // 禁用提示
$("input#test").bsSuggest("enable");     // 启用提示
$("input#test").bsSuggest("destroy");    // 销毁插件
$("input#test").bsSuggest("version");    // 查看版本
<!--  事件监听
onDataRequestSuccess  // 当 AJAX 请求数据成功时触发，并传回结果到第二个参数
onSetSelectValue      // 当从下拉菜单选取值时触发，并传回设置的数据到第二个参数
onUnsetSelectValue    // 当设置了 idField，且自由输入内容时触发（与背景警告色显示同步）
onShowDropdown        // 下拉菜单显示时触发
onHideDropdown        // 拉菜单隐藏式触发
-->
$("#test").bsSuggest('init', {
    url: "/rest/sys/getuserlist?keyword=",
    effectiveFields: ["userName", "email"],
    searchFields: [ "shortAccount"],
    effectiveFieldsAlias:{userName: "姓名"},
    clearable: true,
    idField: "userId",
    keyField: "userName"
}).on('onDataRequestSuccess', function (e, result) {
    console.log('onDataRequestSuccess: ', result);
}).on('onSetSelectValue', function (e, selectedData, selectedRawData) {
    console.log('onSetSelectValue: ', e.target.value, selectedData, selectedRawData);
}).on('onUnsetSelectValue', function () {
    console.log('onUnsetSelectValue');
}).on('onShowDropdown', function (e, data) {
    console.log('onShowDropdown', e.target.value, data);
}).on('onHideDropdown', function (e, data) {
    console.log('onHideDropdown', e.target.value, data);
});