怎么实现select可以下拉也可以输入的功能

今天项目中有要求用到这个功能，所以在网上搜了老半天，找到一个比较好的插件jquery-editable-select，就是用我们知道，一般select下拉框是只能选择的，不能用来输入内容的。而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时，我们可以让select变成text，允许用户输入想要的内容，同时还可以在输入的时候将包含关键字的项也列出来，供快速选择。

首先先引入插件的css和js

<link rel="stylesheet" type="text/css" href="dist/jquery-editable-select.css"/>

<script src="jquery.min.js"></script>
<script src="dist/jquery-editable-select.min.js"></script>

html

<select id="editable-select"> 
<option value=""></option>
   <option>Alfa Romeo</option> 
   <option>Audi</option> 
   <option>中国人民银行</option> 
   <option>中国人民</option> 
   <option>中国</option> 
   <option>BMW</option> 

</select> 

js

$('#editable-select').editableSelect({
    effects: 'fade'   //下拉列表出来的方式
    duration: 200  //时间
    appendTo: 'body'  //添加到何处，此处省略就是添加到输入框下边
});