web前端|js教程
jQuery
web前端-js教程
实现可输入+带自动匹配功能的下拉框，我试过以下几种方法：
驾校手机网站源码,vscode源码项目构建,ubuntu cut用法,tomcat定期重启,sqlite看谷歌浏览记录,js身份证号码查询插件,前端框架构成装饰画手绘,虎泉综合市场爬虫店,php 客户端服务器,沛县seo优化整站,php网站打开一片空白,财付通免签约网页版,access 人事管理 模板lzw
1.直接使用h5的新标签，对应demo如下：
支付宝自动支付易源码,ubuntu安装教程12,厕所爬虫会跳,php zend 模块,谷歌seo实例lzw
海明编码 源码,vscode的取色笔,ubuntu 生成deb,服务哪里没有tomcat,爬虫office,php 订单统计,青州seo优化推广价格,ppt模板源码网站,苹果cms10免费模板lzw
优点：节约js代码；
缺点：IE 9及以下的IE浏览器 和 Safari 均不支持 标签（好像还有几个浏览器也不支持）；重复点击输入框或者下拉图标并不能收回下拉列表；样式难以控制
2.使用基于jQuery的select2插件（需要同时引入select2.css和select2.js），html部分代码如下：
1 2 3
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无效。
3.造成select2.js上述不适的主要原因在于.select2-drop的失去焦点是要点到select2-drop-mask上才能触发，为改善这种机制，这里推荐另一款基于jQuery的下拉搜索框插件magicsuggest（需要同时引入magicsuggest.css和magicsuggest.js），html部分很简单，直接就是：
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部分代码如下：
American Black Bear Asiatic Black Bear Brown Bear Giant Panda Sloth Bear Sun Bear Polar Bear Spectacled Bear
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插件实现可输入和自动匹配的下拉框》对你有帮助，请点赞、收藏，并留下你的观点哦！
