jQuery插件实现可输入和自动匹配的下拉框(jquery插件使用教程)

编辑：rootadmin

推荐整理分享jQuery插件实现可输入和自动匹配的下拉框(jquery插件使用教程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery插件库方法,jquery 插件写法,简单的jquery插件实例,简单的jquery插件实例,jquery插件大全,jquery 插件写法,jquery插件使用,jquery插件使用教程,内容如对您有帮助，希望把文章链接给更多的朋友！

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

1.直接使用h5的新标签<datalist>，对应demo如下：

优点：节约js代码；

缺点：IE 9及以下的IE浏览器和 Safari 均不支持 <datalist> 标签（好像还有几个浏览器也不支持）；重复点击输入框或者下拉图标并不能收回下拉列表；样式难以控制

2.使用基于jQuery的select2插件（需要同时引入select2.css和select2.js），html部分代码如下：

js部分代码如下：

注意：与bootstrap的Modal模态框结合使用时，会出现下拉列表出现在遮罩层的底层和点击弹出框关闭按钮但下拉列表并没有消失的问题，找了半天原来问题出在select2.css这个样式表中，

原因：点击输入框，此插件会生成一个遮罩层(类名为.select2-drop-mask)和一个下拉列表(类名为.select2-drop)，这两者的层叠性(z-index)依次为，，但是modal弹出框的层叠性大于，所以才会导致出现上述两个问题

解决办法：如果将.select2-drop-mask和.select2-drop的z-index分别提高到、，下拉列表成功显示在上面，但在打开了下拉列表的前提下点击modal弹出框的关闭按钮会先收回下拉框，再次点击才能关闭弹出窗，用户体验不是很好；这里可以尝试提高关闭按钮的z-index，前提一定要父元素不能是modal弹出框，否则其提高的z-index无效。

如果想更深入了解select2.js插件，可以参考 id="magicsuggest"></div>

js部分代码如下：

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

缺点：多余的样式较多（阴影、高亮、错误提示、多选），需要根据具体需要调整样式；不能直接通过$(this).val()来获取原输入框的值；数据量过大时加载会出现延迟

4.鉴于上面那个插件默认的是多选的样式，用到项目里也不能直接获取<select>标签里的值，这里我个人推荐chosen这款插件（需要同时引入chosen.css和chosen.js），html部分代码如下：

js部分代码如下：

注意：如果与bootstrap的Modal模态框结合使用时，会出现下拉列表显示不出来，同时.modal-body右侧出现滚动条，原因就在于bootstrap给.modal-body设置了一个overflow-y:auto的默认样式，所以解决办法就是给.modal-body添加一个overflow-y:visible的样式来覆盖它。

5.当然，实现相同功能的jQuery插件还有很多，具体可以参考

jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解本文实例讲述了jQueryautoComplete插件两种使用方式及动态改变参数值的方法。分享给大家供大家参考，具体如下：一、一次加载、多次使用：前端JS代码：

html、css和jquery相结合实现简单的进度条效果实例代码废话不多说了，直接给大家贴代码了，具体代码如下所示：!DOCTYPEhtmlhtmlxmlns="

可输入文字查找ajax下拉框控件 ComBox的实现方法 GooFunc.js文件//获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到functiongetElCoordinate(dom){vart=dom.offsetTop;varl=dom.offsetLeft;dom=dom.offsetParent;whil

标签: jquery插件使用教程

本文链接地址:https://www.jiuchutong.com/biancheng/379351.html 转载请保留说明！

上一篇：jquery 实现回车登录详解及实例代码(jquery回车触发事件)

下一篇：jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解