基于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 相关文章推荐
Javascript倒计时代码
Aug 12 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
js闭包用法实例详解
Dec 13 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
vue 文件目录结构详解
Nov 24 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
Vue三层嵌套路由的示例代码
May 05 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 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
Oracle 常见问题解答
2006/10/09 PHP
对盗链说再见...
2006/10/09 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
Python 自动补全(vim)
2014/11/30 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
python3 logging日志封装实例
2020/04/08 Python
Python实现数字的格式化输出
2020/08/01 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
opencv实现图像平移效果
2021/03/24 Python
班主任对学生的评语
2014/04/26 职场文书
公司承诺书范文
2014/05/19 职场文书
环保志愿者活动总结
2014/06/27 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
生产车间管理制度
2015/08/04 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
javascript对象3个属性特征
2021/11/17 Javascript