基于jQuery实现select下拉选择可输入附源码下载


Posted in Javascript onFebruary 03, 2016

我们知道,一般select下拉框是只能选择的,不能用来输入内容的。而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时,我们可以让select变成text,允许用户输入想要的内容,同时还可以在输入的时候将包含关键字的项也列出来,供快速选择。

基于jQuery实现select下拉选择可输入附源码下载

查看演示效果            源码下载

本文将用实例和大家分享一款基于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!"); 
} 
});

以上内容给大家分享了核心代码,需要源码的朋友可以直接下载哦。

Javascript 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 #Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 #Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 #Javascript
AngularJS实现Model缓存的方式
Feb 03 #Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 #Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 #Javascript
简单实现js选项卡切换效果
Feb 03 #Javascript
You might like
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
PHP中的流(streams)浅析
2015/07/02 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
JavaScript的面向对象(二)
2006/11/09 Javascript
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python中dir函数用法分析
2015/04/17 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python修改MP3文件的方法
2015/06/15 Python
json跨域调用python的方法详解
2017/01/11 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
安全生产先进个人材料
2014/02/06 职场文书
通用自荐信范文
2014/03/14 职场文书
语文课外活动总结
2014/08/27 职场文书
普通话演讲稿
2014/09/03 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
Python Pandas 删除列操作
2022/03/16 Python