文章目錄

• 一、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 前端關鍵代碼：

<label class="col-sm-2 control-label">油井編號(插件測試):</label><div class="col-sm-4 controls"><div class="input-group"><input type="text" class="form-control" id="wellId_test" name="wellInfo.wellId"><div class="input-group-btn"><button type="button" class="btn btn-white dropdown-toggle"data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right" role="menu"></ul></div></div></div>

1.5.2 js代碼：

//bootstrap-suggest插件根據用戶身份加載油井$("#wellId_test").bsSuggest('init',{clearable:true, //是否可清除已輸入的內容url:"/opms/wellInfo/getAllWellId",showBtn:true, //是否顯示可下拉按鈕ignorecase:true, //前端搜索匹配時，忽略大小寫hideOnSelect:true, //鼠標從列表單擊選擇了值時，是否隱藏選擇列表listAlign:'auto', //提示列表對齊位置，left/right/autoidField:"wellId", //每組數據的哪個字段作為 data-id，優先級高于 indexId 設置（推薦）keyField :"wellId", //每組數據的哪個字段作為輸入框內容，優先級高于 indexKey 設置（推薦）effectiveFields: ["wellId","wellType","abandonWell"],// 有效顯示于列表中的字段，非有效字段都會過濾，默認全部有效。effectiveFieldsAlias: {"wellId":"井編號","wellType":"井類型","abandonWell":"是否報廢"},}).on("onSetSelectValue",function (e,keyword) {// alert($('#wellId_test').val());// $('#wellId_test').val(keyword.wellId);// wellId_add=keyword.wellId;}).on("onUnsetSelectValue",function (e) {// wellId_add = '';});

1.5.3 Controller層：

//根據用戶身份獲取油井編號@RequestMapping(value = "/getAllWellId",method = {RequestMethod.GET,RequestMethod.POST})@ResponseBodypublic Map<String,Object> getAllWellId(HttpServletRequest req, HttpServletResponse res)throws Exception{//先從session中取出存進去的用戶對象UserInfo ui= (UserInfo) req.getSession().getAttribute("USERINFO");//根據身份獲取油井信息，管理員可查看全部油井，操作員只能查看所屬作業區的油井List<WellInfo> wellInfos= wellInfoService.getAllOilWellByRoleId(ui); /* for(WellInfo wellInfo:wellInfos){System.out.println(wellInfo);}*/int count=0;if(wellInfos!=null&&wellInfos.size()>0){count=wellInfos.size();}//創建result對象，保存返回結果Map<String,Object> result=new HashMap<>(2);result.put("count",count);result.put("value",wellInfos);return result;}

后面Service層和Dao層的代碼就不寫了，你看到Controller層這里應該就會了

配置參數如下:

var defaultOptions = {url: null, //請求數據的 URL 地址jsonp: null, //設置此參數名，將開啟jsonp功能，否則使用json數據結構data: {value: []}, //提示所用的數據，注意格式indexId: 0, //每組數據的第幾個數據，作為input輸入框的 data-id，設為 -1 且 idField 為空則不設置此值indexKey: 0, //每組數據的第幾個數據，作為input輸入框的內容idField: '', //每組數據的哪個字段作為 data-id，優先級高于 indexId 設置（推薦）keyField: '', //每組數據的哪個字段作為輸入框內容，優先級高于 indexKey 設置（推薦）/* 搜索相關 */autoSelect: true, // 鍵盤向上/下方向鍵時，是否自動選擇值allowNoKeyword: TRUE, // 是否允許無關鍵字時請求數據getDataMethod: 'firstByUrl', // 獲取數據的方式，url：一直從url請求；data：從 options.data 獲取；firstByUrl：第一次從Url獲取全部數據，之后從options.data獲取delayUntilKeyup: false, // 獲取數據的方式 為 firstByUrl 時，是否延遲到有輸入時才請求數據ignorecase: false, // 前端搜索匹配時，是否忽略大小寫effectiveFields: [], // 有效顯示于列表中的字段，非有效字段都會過濾，默認全部有效。effectiveFieldsAlias: {}, // 有效字段的別名對象，用于 header 的顯示searchFields: [], // 有效搜索字段，從前端搜索過濾數據時使用，但不一定顯示在列表中。effectiveFields 配置字段也會用于搜索過濾twoWayMatch: true, // 是否雙向匹配搜索。為 true 即輸入關鍵字包含或包含于匹配字段均認為匹配成功，為 false 則輸入關鍵字包含于匹配字段認為匹配成功multiWord: false, // 以分隔符號分割的多關鍵字支持separator: ',', // 多關鍵字支持時的分隔符，默認為半角逗號delay: 300, // 搜索觸發的延時時間間隔，單位毫秒emptyTip: '', // 查詢為空時顯示的內容，可為 htmlsearchingTip: '搜索中...', // ajax 搜索時顯示的提示內容，當搜索時間較長時給出正在搜索的提示hideOnSelect: false, // 鼠標從列表單擊選擇了值時，是否隱藏選擇列表/* UI */autoDropup: false, //選擇菜單是否自動判斷向上展開。設為 true，則當下拉菜單高度超過窗體，且向上方向不會被窗體覆蓋，則選擇菜單向上彈出autoMinWidth: false, //是否自動最小寬度，設為 false 則最小寬度不小于輸入框寬度showHeader: false, //是否顯示選擇列表的 header。為 true 時，有效字段大于一列則顯示表頭showBtn: true, //是否顯示下拉按鈕inputBgColor: '', //輸入框背景色，當與容器背景色不同時，可能需要該項的配置inputWarnColor: 'rgba(255,0,0,.1)', //輸入框內容不是下拉列表選擇時的警告色listStyle: {'padding-top': 0,'max-height': '375px','max-width': '800px','overflow': 'auto','width': 'auto','transition': '0.3s','-webkit-transition': '0.3s','-moz-transition': '0.3s','-o-transition': '0.3s'}, //列表的樣式控制listAlign: 'left', //提示列表對齊位置，left/right/autolistHoverStyle: 'background: #07d; color:#fff', //提示框列表鼠標懸浮的樣式listHoverCSS: 'jhover', //提示框列表鼠標懸浮的樣式名稱clearable: false, // 是否可清除已輸入的內容/* key */keyLeft: 37, //向左方向鍵，不同的操作系統可能會有差別，則自行定義keyUp: 38, //向上方向鍵keyRight: 39, //向右方向鍵keyDown: 40, //向下方向鍵keyEnter: 13, //回車鍵/* methods */fnProcessData: processData, //格式化數據的方法，返回數據格式參考 data 參數fnGetData: getData, //獲取數據的方法，無特殊需求一般不作設置fnAdjustAjaxParam: null, //調整 ajax 請求參數方法，用于更多的請求配置需求。如對請求關鍵字作進一步處理、修改超時時間等fnPreprocessKeyword: null //搜索過濾數據前，對輸入關鍵字作進一步處理方法。注意，應返回字符串 };

提示：在 bootstrap v4 下， clearable 為 true 時，應引入 font-awesome 圖標庫，該清除按鈕使用了 fa-plus 圖標。

使用bootstrap-suggest時的bug解決方案:

https://blog.csdn.net/qq_43753724/article/details/114884133?spm=1001.2014.3001.5501

總結

以上是生活随笔為你收集整理的bootstrap-suggest插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。