前端下拉框能支持手动输入_可输入也可选择的下拉框

最近在前端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地址： //建议下载到本地

引用editable：

2，HTML

数据加载中..

3，js渲染，赋值，取值

在渲染完select框之后加入代码：

$('.shift-info').editableSelect({

effects: 'slide