最近在前端web頁面開發的時候，用到比較多資料的下拉框，就尋思着能不能即可模糊查詢過濾又可下拉選擇呢？答案肯定是可以的，經過搜尋參考，發現jquery的editable-select插件不錯，支援鍵盤操作，配置使用也簡單，于是就引進項目使用，在這裡做下總結。
原了解析：
一般的select框肯定是不能輸入的，閱讀editable-select插件源碼，其實是将select變成一個input，然後将select裡面的option變成ul元素，這樣以來就可以實作輸入以及通過js/css過濾了。
使用：
1, 引入js、css
由于是jquery的插件，肯定是基于jquey.js的，然而在使用的過程中我發現引入項目中的jQuery [email protected]會有一個js報錯，不能讀取某個元素的子元素。不知道是jquery版本問題還是？因為時間有限不糾結在此，後來引入 jQuery JavaScript Library v2.1.1/v1.11.1 Copyright 2005, 2014 jQuery 一切正常。
遠端引用jquery位址： //建議下載下傳到本地
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
引用editable：
<link href="https://rawgithub.com/indrimuska/jquery-editable-select/master/source/jquery.editable-select.min.css" target="_blank" rel="external nofollow" rel="stylesheet" />
<script src="https://rawgithub.com/indrimuska/jquery-editable-select/master/source/jquery.editable-select.js"></script>
2，HTML
<select class="form-control shift-info">
<option>資料加載中..</option>
</select> 3，js渲染，指派，取值
在渲染完select框之後加入代碼：
$('.shift-info').editableSelect({
effects: 'slide',
onSelect: function (element) {
//$('.shift-info').attr({'data-val':element.val(),'placeholder':'請輸入或選擇班次名..'});
$('.shift-info').attr('data-val',element.val())
}
}).prop('placeholder','請輸入或選擇班次名..');
effects：當觸發彈出下拉選擇框時的下拉框展示過渡效果，有default，slide，fade三個值，預設是default。
onSelect：當下拉框中的選項被選中時觸發。
注意：
1，這個時候如果我們用$('.shift-info').val()取值得到的是中文文本，而我們平時使用下拉框時一般是使用其id值，是以這裡onselect選中後使用.attr()自定義屬性需要指派，再通過$('.shift-info').attr('data-val')取值。
2，因為這個插件是将select框變成input和ul，在這裡給input元素添加placeholder屬性優化使用者體驗。
當然還有其他的屬性配置：
filter：過濾，即當輸入内容時下拉選項會比對輸入的字元，支援中文，true/false，預設true。
duration：下拉選項框展示的過渡動畫速度，有fast，slow，以及數字（毫秒），預設是fast。
onCreate：當輸入時觸發。
onShow：當下拉時觸發。
onHide：當下拉框隐藏時觸發。
4，效果圖
轉載于:https://www.cnblogs.com/liliangel/p/5511532.html