模糊搜索下拉框（可输入+自动匹配）

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

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>

优点：节约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>

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.鉴于上面那个插件默认的是多选的样式，用到项目里也不能直接获取标签里的值，这里我个人推荐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**

模糊搜索下拉框（可输入+自动匹配）相关推荐

Excel制作导入模板，多级联动下拉框（一整列的设置），修改一级下拉框内容，自动清空二级内容
目录效果展示一.数据准备二.模板制作原因1:为空原因二:名称管理器数据有误三.修改一级下拉框内容,自动清空二级内容 1,效果演示 2,实际操作效果展示一.数据准备 1,新建一张表,在s ...
vue下拉框可输入关键字进行模糊查询
vue下拉框可输入关键字进行模糊查询在<el-select>中,加上 filterable 即可(v-model.trim:是过滤输入的空格),clearable:输入框带清空输入内容的 ...
下拉框根据输入文字自动选择和输入提示
要求根据输入商品名字.对应的下拉框自动选择到对应名字的商品.. 实现方法. 1.为每个option设置一个属性.用来对应文本框中输入的拼音,或者其他简码. 此方法缺点..有限制性.属性局限了文本框中 ...
vue如何取消下拉框按回车自动下拉_按逗号拆分Excel单元格，再分离中文数字，春节压岁钱统计就用它...
大家春节好! 大年三十还在坚持更新的小编估计也没几个了. 今天这篇推送,是为了趁热打铁,教大家统计萌娃们收到的压岁钱.具体要求是:按分隔符将一个单元格拆分成多个,且分离中文和数字,并且转置成竖向表格. ...
vue如何取消下拉框按回车自动下拉_如何用大白菜重装系统|大白菜怎么重装系统教程详解...
我们在电脑出现崩溃故障的问题时,都会通过重装系统解决,现在重装系统很方便,比如用大白菜做成的启动U盘就可以重装系统,很多人还不知道怎么用大白菜重装系统,接下来系统城小编就跟大家介绍大白菜怎么重装系统的 ...
Vue element 下拉框可输入可选择(无bug)
背景: 需要一个可填可选的下拉框当用户自定义输入时,自动添加"(其他)"后缀效果如下: <el-select v-model="value"place ...
iviewUI选择下拉框，输入搜索词调用接口远程搜索
使用场景: 项目使用中,遇到下拉框数据超过千条,甚至万条的数据,会崩溃,不能直接展示完,又不能分页选择 :所以最后改成输入搜索词,调用接口进行远程搜索如图: 输入关键字,调用接口返回数据,选择想要的 ...
el-select下拉框可输入
element-ui中下拉框可输入常用得有两种方法 1.@blur方法:输入内容会去匹配选择项,没匹配中清空输入框 <el-form-item :label="firstClsf&qu ...
vue如何取消下拉框按回车自动下拉_Web自动化测试 | Select下拉框
简介在web自动化测试中,经常会遇到下拉框,对列出的选项进行选择,或者判断选择的选项,本文将介绍如何使用Selenium去操作下拉框,实现自动化测试. 测试页面测试URL:http://sahit ...

模糊搜索下拉框（可输入+自动匹配）

模糊搜索下拉框（可输入+自动匹配）

模糊搜索下拉框（可输入+自动匹配）相关推荐

最新文章

热门文章