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 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
js实现tab切换效果实例
Sep 16 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 Javascript
javascript History对象原理解析
Feb 17 Javascript
JS数组方法reduce的用法实例分析
Mar 03 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
Php注入点构造代码
2008/06/14 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python实现自动更换ip的方法
2015/05/05 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Mac 上切换Python多版本
2017/06/17 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
高分子材料与工程专业推荐信
2013/12/01 职场文书
明信片寄语大全
2014/04/08 职场文书
行政诉讼答辩状
2015/05/21 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
Redis实现订单过期删除的方法步骤
2022/06/05 Redis