可輸入也可選擇的下拉框

最近在前端web頁面開發的時候，用到比較多數據的下拉框，就尋思着能不能即可模糊查詢過濾又可下拉選擇呢？答案肯定是可以的，經過搜索參考，發現jquery的editable-select插件不錯，支持鍵盤操作，配置使用也簡單，於是就引進項目使用，在這里做下總結。

原理解析：

一般的select框肯定是不能輸入的，閱讀editable-select插件源碼，其實是將select變成一個input，然后將select里面的option變成ul元素，這樣以來就可以實現輸入以及通過js/css過濾了。

使用：

1, 引入js、css

由於是jquery的插件，肯定是基於jquey.js的，然而在使用的過程中我發現引入項目中的jQuery v@1.8.0會有一個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" 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，效果圖