基于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实现页面自适应
Jan 19 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
jquery实现动态画圆
Dec 04 Javascript
javascript中 try catch用法
Aug 16 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
vue实现倒计时功能
Mar 24 Vue.js
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
中国的第一台收音机
2021/03/01 无线电
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
微信支付开发订单查询实例
2016/07/12 PHP
js删除所有的cookie的代码
2010/11/25 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
详解node中创建服务进程
2017/05/09 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
JavaScript实现区块链
2018/03/14 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
python 弧度与角度互转实例
2020/04/15 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
大学本科毕业生的自我鉴定
2013/11/26 职场文书
抄作业检讨书
2014/02/17 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
男方婚前保证书
2015/02/28 职场文书
体育教师研修感悟
2015/11/18 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js