基于jQuery实现select下拉选择可输入附源码下载
我们知道,一般select下拉框是只能选择的,不能用来输入内容的。而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时,我们可以让select变成text,允许用户输入想要的内容,同时还可以在输入的时候将包含关键字的项也列出来,供快速选择。
查看演示效果 源码下载
本文将用实例和大家分享一款基于jQuery的下拉框插件,它允许用户输入内容,同时下拉选项中会及时匹配相关选项,支持键盘操作,还支持html选项内容,当然还能让下拉的过程带有动画效果。我们来看下如何使用。
HTML结构
下面是一个基本的select下拉框。
<select id="editable-select"> <option>Alfa Romeo</option> <option>Audi</option> <option>中国人民银行</option> <option>中国人民</option> <option>中国</option> <option>BMW</option> </select>
此外还需要加载jQuery库和jquery.editable-select.js文件,在源码下载包里已经有了。
jQuery
只需要以下代码就能实现传统的下拉框变成有输入功能的下拉框了。
$('#editable-select').editableSelect({ effects: 'slide' });
其实我们细看插件代码就会发现,作者是将原有的select处理了下,变成了一个输入表单text和一个列表ul。这样text可以输入,下拉选项则用ul面板,这样一来ul里的选项就可以添加任意html代码了,demo中有示例。然后通过使用CSS以及js技术可以实现下拉弹出、输入查找匹配功能。
选项设置
filter:过滤,即当输入内容时下拉选项会匹配输入的字符,支持中文,true/false,默认true。
effects:动画效果,当触发弹出下拉选择框时的下拉框展示过渡效果,有default,slide,fade三个值,默认是default。
duration:下拉选项框展示的过渡动画速度,有fast,slow,以及数字(毫秒),默认是fast。
事件
onCreate:当输入时触发。
onShow:当下拉时触发。
onHide:当下拉框隐藏时触发。
onSelect:当下拉框中的选项被选中时触发。
事件调用方法:
$('#editable-select').editableSelect({ onSelect: function (element) { alert("Selected!"); } });
以上内容给大家分享了核心代码,需要源码的朋友可以直接下载哦。
相关文章
- 这篇文章主要介绍了Mybatis Plus select 实现只查询部分字段的操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-01
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 1.在没有设置默认值的情况下: 复制代码 代码如下:SELECT userinfo.id, user_name, role, adm_regionid, region_name , create_timeFROM userinfoLEFT JOIN region ON userinfo.adm_regionid = region.id 结果:...2014-05-31
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要介绍了Vue select 绑定动态变量的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23
- 这篇文章主要为大家详细介绍了jquery Ajax实现Select动态添加数据的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-06-15
MySQL中SELECT+UPDATE处理并发更新问题解决方案分享
问题背景: 假设MySQL数据库有一张会员表vip_member(InnoDB表),结构如下: 当一个会员想续买会员(只能续买1个月、3个月或6个月)时,必须满足以下业务要求: •如果end_at早于当前时间,则设置start_at为当前时间,end_at为当前时...2014-05-31- 下面小编就为大家带来一篇jQuery为动态生成的select元素添加事件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-09-01
- 这篇文章主要介绍javascript获取select标签选中的值方法,比较实用,需要的朋友可以参考下。...2016-06-12
- 这篇文章主要介绍了Select下拉框模糊查询功能实现代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-29
- 这篇文章主要为大家详细介绍了js实现可输入可选择的select下拉框,可及时匹配包含输入的内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-09
Mybatis之Select Count(*)的获取返回int的值操作
这篇文章主要介绍了Mybatis之Select Count(*)的获取返回int的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-23- 本文介绍了jQuery实现用户输入自动完成功能的方法。具有很好的参考价值,下面跟着小编一起来看下吧...2017-02-19
- 这篇文章主要介绍了JavaScript实现通过select标签跳转网页的方法,涉及javascript事件响应及窗口操作相关技巧,需要的朋友可以参考下...2016-10-02
- 本文主要介绍了Element中select多数据加载优化的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-27
- 这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单,不刷新的联动,感兴趣的小伙伴们可以参考一下...2016-04-19
- 下面小编就为大家带来一篇JQuery动态添加Select的Option元素实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-09-01
MySQL使用select语句查询指定表中指定列(字段)的数据
本文介绍MySQL数据库中执行select查询语句,查询指定列的数据,即指定字段的数据,需要的朋友可以参考下...2016-12-02Bootstrap 下拉多选框插件Bootstrap Multiselect
这篇文章主要介绍了Bootstrap 下拉多选框插件Bootstrap Multiselect,引入文件及使用方法讲解,需要的朋友参考下吧...2017-01-26