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


Posted in Javascript onOctober 24, 2016

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

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插件,可以参考https://3water.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']
});

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

缺点:多余的样式较多(阴影、高亮、错误提示、多选),需要根据具体需要调整样式;不能直接通过$(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的样式来覆盖它。

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

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 #Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 #Javascript
js实现上传文件添加和删除文件选择框
Oct 24 #Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 #Javascript
第一次接触Bootstrap框架
Oct 24 #Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 #Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 #Javascript
You might like
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php目录管理函数小结
2008/09/10 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
js 调用百度分享功能
2017/02/27 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
Django多数据库联用实现方法解析
2020/11/12 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
耐克中国官方商城:Nike中国
2018/10/18 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
招标授权委托书样本
2014/09/23 职场文书
2014年人事科工作总结
2014/11/19 职场文书
转让协议书
2015/01/27 职场文书
保安辞职信范文
2015/02/28 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
政协工作总结2015
2015/05/20 职场文书
色戒观后感
2015/06/12 职场文书
团队拓展训练感想
2015/08/07 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL