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

实现可输入+带自动匹配功能的下拉框，我试过以下几种方法：

1.直接使用h5的新标签<datalist>，对应demo如下：

<input list="browsers"><datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist>

优点：节约js代码；

缺点：IE 9及以下的IE浏览器 和 Safari 均不支持 <datalist> 标签（好像还有几个浏览器也不支持）；重复点击输入框或者下拉图标并不能收回下拉列表；样式难以控制

2.使用基于jQuery的select2插件（需要同时引入select2.css和select2.js），html部分代码如下：

<select class="select2_test" > <option></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option></select>

js部分代码如下：

$('.select2_test').select2({ placeholder: "请选择所属选项", allowClear: true;}); 

注意：与bootstrap的Modal模态框结合使用时，会出现下拉列表出现在遮罩层的底层和点击弹出框关闭按钮但下拉列表并没有消失的问题，找了半天原来问题出在select2.css这个样式表中，

原因：点击输入框，此插件会生成一个遮罩层(类名为.select2-drop-mask)和一个下拉列表(类名为.select2-drop)，这两者的层叠性(z-index)依次为9991，9992，但是modal弹出框的层叠性大于10000，所以才会导致出现上述两个问题

解决办法：如果将.select2-drop-mask和.select2-drop的z-index分别提高到19991、19992，下拉列表成功显示在上面，但在打开了下拉列表的前提下点击modal弹出框的关闭按钮会先收回下拉框，再次点击才能关闭弹出窗，用户体验不是很好；这里可以尝试提高关闭按钮的z-index，前提一定要父元素不能是modal弹出框，否则其提高的z-index无效。

如果想更深入了解select2.js插件，可以参考//www.Vevb.com/article/95561.htm

3.造成select2.js上述不适的主要原因在于.select2-drop的失去焦点是要点到select2-drop-mask上才能触发，为改善这种机制，这里推荐另一款基于jQuery的下拉搜索框插件magicsuggest（需要同时引入magicsuggest.css和magicsuggest.js），html部分很简单，直接就是：

<div id="magicsuggest"></div>

js部分代码如下：

$('#magicsuggest').magicSuggest({　　placeholder:''，　　allowFreeEntries: false,　　maxSelection:1,　　autoSelect:true,　　valueField:"id",　　displayField:"value",　　resultAsString:true,　　selectionStacked: true,　　highlight:false,　　data: ['Paris', 'New York', 'Gotham']}); 

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