基于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 相关文章推荐
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
JS链式调用的实现方法
Mar 07 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 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
mysq GBKl乱码
2006/11/28 PHP
删除数组元素实用的PHP数组函数
2008/08/18 PHP
PHP多个版本的分析解释
2011/07/21 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
php微信开发之关注事件
2018/06/14 PHP
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
门卫岗位职责
2013/11/15 职场文书
高二物理教学反思
2014/02/08 职场文书
考试作弊检讨书
2015/01/27 职场文书
关于召开会议的通知
2015/04/15 职场文书
交通事故责任认定书
2015/08/06 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL