jQuery插件实现可输入和自动匹配的下拉框-tutorial js-php.cn

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

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

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

Salin selepas log masuk

优点：节约js代码；

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

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>

Salin selepas log masuk

js部分代码如下：

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

Salin selepas log masuk

注意：与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无效。

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

js部分代码如下：

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

Salin selepas log masuk

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

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

4.鉴于上面那个插件默认的是多选的样式，用到项目里也不能直接获取