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 相关文章推荐
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
angularJs中$scope数据序列化的实例
Sep 30 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
php+mysql实现无限级分类
2015/11/11 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
js中if语句的几种优化代码写法
2011/03/12 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
用python写的一个wordpress的采集程序
2016/02/27 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
Python偏函数实现原理及应用
2020/11/20 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
行政助理的职责
2013/11/14 职场文书
养殖项目策划书范文
2014/01/13 职场文书
委托书格式
2014/08/01 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
解决numpy数组互换两行及赋值的问题
2021/04/17 Python