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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
js实现点击选项置顶动画效果
Aug 25 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP基础知识介绍
2013/09/17 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
JavaScript 面向对象之命名空间
2010/05/04 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
python实现指定字符串补全空格的方法
2015/04/30 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
python动态进度条的实现代码
2019/07/03 Python
Python对列表的操作知识点详解
2019/08/20 Python
Pytorch之保存读取模型实例
2019/12/30 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
旷课检讨书2000字
2014/01/14 职场文书
高三体育教学反思
2014/01/29 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
三八妇女节标语
2014/10/09 职场文书
李白故里导游词
2015/02/12 职场文书
专家推荐信范文
2015/03/26 职场文书
行政处罚告知书
2015/07/01 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python