下拉框（可输入+自动匹配）

Posted 2020-08-15 衣冠小禽兽

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

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插件，可以参考http://www.cnblogs.com/liuxiaobo93/p/5112993.html

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\']
}); 

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

缺点：多余的样式较多（阴影、高亮、错误提示、多选），需要根据具体需要调整样式；不能直接通过$(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的样式来覆盖它。网上还有一些关于jquery-chosen的教程，推荐阅读这篇博文http://www.cnblogs.com/pshay/archive/2012/12/11/2813877.html

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