可输入也可选择的下拉框

最近在前端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，效果图