jQuery插件实现可输入和自动匹配的下拉框

　　autoSelect:true,
　　valueField:"id",
　　displayField:"value",
　　resultAsString:true,
　　selectionStacked: true,
　　highlight:false,
　　data: ['Paris', 'New York', 'Gotham']});

优点：不会出现层叠性冲突的问题；样式美观；允许多项选择

缺点：多余的样式较多（阴影、高亮、错误提示、多选），需要根据具体需要调整样式；不能直接通过$(this).val()来获取原输入框的值；数据量过大时加载会出现延迟

4.鉴于上面那个插件默认的是多选的样式，用到项目里也不能直接获取<select>标签里的值，这里我个人推荐chosen这款插件（需要同时引入chosen.css和chosen.js），html部分代码如下：

<select data-placeholder="Type 'C' to view" style="width:100%" class="myselect chosen-select-no-results" tabindex="10">
 <option value=""></option>
 <option>American Black Bear</option>
 <option>Asiatic Black Bear</option>
 <option>Brown Bear</option>
 <option>Giant Panda</option>
 <option>Sloth Bear</option>
 <option>Sun Bear</option>
 <option>Polar Bear</option>
 <option>Spectacled Bear</option>
</select> 

 js部分代码如下：

var config = {
　　'.chosen-select':{},
　　'.chosen-select-deselect':{allow_single_deselect:true},
　　'.chosen-select-no-single':{disable_search_threshold:10},
　　'.chosen-select-no-results':{no_results_text:'Oops, nothing found!'},
　　'.chosen-select-width':{width:"95%"}
}
for (var selector in config) {
　　$(selector).chosen(config[selector]);
}

注意：如果与bootstrap的Modal模态框结合使用时，会出现下拉列表显示不出来， 同时.modal-body右侧出现滚动条，原因就在于bootstrap给.modal-body设置了一个overflow-y:auto的默认样式，所以解决办法就是给.modal-body添加一个overflow-y:visible的样式来覆盖它。

5.当然，实现相同功能的jQuery插件还有很多，具体可以参考http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-three.html

如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。