bootstrap-suggest-plugin input可選可輸(表單) 好用的前端插件


bootstrap-suggest-plugin          DEMO下載

1.准備:頁面引入(點擊下載)

  <link rel="stylesheet" href="../../js/bootstrap.min.css" />
  <script src="../../js/jquery.min.js"></script>
  <script src="../../js/bootstrap.min.js"></script>
  <script src="../../js/bootstrap-suggest.js"></script>

2.html內容

  <input type="text" id="name"/>
  <div class="input-group-btn" style="width:0px;">
    <ul class="dropdown-menu dropdown-menu-left" role="menu"></ul>
  </div>

3.JS中初始化

//所有參數的默認配置
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: '',                   // 查詢為空時顯示的內容,可為 html
    searchingTip: '搜索中...',       // 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/auto
    listHoverStyle: '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       //搜索過濾數據前,對輸入關鍵字作進一步處理方法。注意,應返回字符串
};
//請根據自身實際情況選擇修改配置//初始化
$("#name").bsSuggest('init', {
    url: "/test/test/testList.do?keyword=",
    effectiveFields: ["name"],
    searchFields: [ "name"],
    effectiveFieldsAlias:{name: "姓名"},
    clearable: true,
    idField: "id",
    keyField: "name"
}).on('onDataRequestSuccess', function (e, result) {//當 AJAX 請求數據成功時觸發,並傳回結果到第二個參數
    console.log('onDataRequestSuccess: ', result);
}).on('onSetSelectValue', function (e, selectedData, selectedRawData) {//當從下拉菜單選取值時觸發,並傳回設置的數據到第二個參數
    console.log('onSetSelectValue: ', e.target.value, selectedData, selectedRawData);
}).on('onUnsetSelectValue', function () {//當設置了 idField,且自由輸入內容時觸發(與背景警告色顯示同步)
    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);
});

 4.插件方法調用

  禁用提示: $("input#test").bsSuggest("disable");
  啟用提示: $("input#test").bsSuggest("enable");
  銷毀插件: $("input#test").bsSuggest("destroy");
  查看版本:$("input#test").bsSuggest("version");

5.碰到的問題

  問題1:name字段通過ajax異步請求有新值增加后,下拉列表中無新值。例如:首次點擊input下拉菜單中有‘111’,‘222’,‘333’三個字段,我要給input新增‘444’,通過ajax保存后(頁面未進行初始化),再次點擊input, 此時未看到’444‘結果。

  解決思路:ajax提交成功后,先 銷毀插件,再次進行初始化即可


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM