可以输入也可以下拉选择的select

https://www.cnblogs.com/leohui/p/654d.html

 

可以输入也可以下拉选择的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!"); } 
}); 

此外,还支持键盘方向键、回车键、Tab键以及Esc键操作。

jQuery Editable Select项目官网地址:https://github.com/indrimuska/jquery-editable-select

原文链接:http://www.helloweba.com/view-blog-348.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/399586.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css-样式重构-代码分享

1.css reset /* reset 重置样式&#xff0c;清除浏览器默认样式&#xff0c;并配置适合设计的基础样式&#xff08;强调文本是否大多是粗体、主文字色&#xff0c;主链接色&#xff0c;主字体等&#xff09;。*/ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquo…

冯洛伊曼体系结构

布尔代数 是一种关于0 和 1 的代数系统&#xff0c;用基础的逻辑符号系统描叙物体和概念&#xff0c;是现代电子计算机的数学和逻辑基础 布尔量&#xff1a; 0 1   True, False 与&#xff1a; a, b ab a*b and 或&#xff1a; ab …

技术分类目录

https://www.helloweba.net/nav.html

Codeforces Round #324 (Div. 2) B. Kolya and Tanya 快速幂

B. Kolya and Tanya Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/584/problem/BDescription Kolya loves putting gnomes at the circle table and giving them coins, and Tanya loves studying triplets of gnomes, sitting in the ve…

Android 自定义Application

在android中 自定义Application 常用的作用是1 保存在程序运行中的全局变量实例&#xff1a;public class GlobalApp extends Application{ private UserData udata ; public UserData getudata(){ return udata; } public void setudat…

web基础,用html元素制作web页面

观察常用网页的HTML元素&#xff0c;在实际的应用场景中&#xff0c;用已学的标签模仿制作。 用div,form制作登录页面&#xff0c;尽可能做得漂亮。 练习使用下拉列表选择框&#xff0c;无序列表&#xff0c;有序列表&#xff0c;定义列表。 <!DOCTYPE html> <html la…

js遍历Object所有属性

https://www.cnblogs.com/itrena/p/9085009.html 在js中经常需要知道Object中的所有属性及值&#xff0c;然而若是直接弹出Object&#xff0c;则是直接显示一个对象&#xff0c;它的属性和值没有显示出来&#xff0c; 不是我们想要的结果&#xff0c;从而需要遍历Object的所有…

一,彻底理解第一个C语言程序 Hello World

对于初学者来说&#xff0c;第一个程序一般都是hello world&#xff0c;而且是照着书上一点一点敲的。所以&#xff0c;在初学者眼中&#xff0c;敲出来的第一个程序代码不过是一堆看不懂的英语。而事实上&#xff0c;C语言作为一门语言&#xff0c;是有语法的。所以这一节&…

es6的箭头函数

1.使用语法 : 参数 > 函数语句; 分为以下几种形式 :  (1) &#xff08;&#xff09;&#xff1d;&#xff1e;语句 ( )&#xff1d;&#xff1e; statement 这是一种简写方法省略了花括号和return 相当于 &#xff08;&#xff09;&#xff1d;&#xff1e;&#xff5…

三级分类菜单的数据库设计

http://www.imooc.com/article/285246?block_idtuijian_wz 最近在设计一款进销存系统的时候&#xff0c;遇到一个分类的设计问题&#xff0c;就是如何将分类设计成数据库里的表&#xff0c;怎么样设计才比较灵活&#xff1f; 举个例子&#xff0c;一级分类&#xff1a;生鲜类&…

双向环形链表

#ifndef DULIST_H #define DULIST_H /* 线性表的双向链表存储结构 */ typedef void * elemtype; typedef struct dulnode { elemtype data;struct dulnode *prior,*next; }dulnode,*dulinklist; /*带头结点的双向循环链表的基本操作(14个) */ void list_init(dulinklist *l)…

linux服务器加入windows域时报错Ticket expired

[rootrusky]# net ads join -U administrator Enter administrators password: kinit succeeded but ads_sasl_spnego_krb5_bind failed: Ticket expired Failed to join domain: failed to connect to AD: Ticket expired使用data命令查看时间&#xff0c;发现linux机器与wind…

机器学习问题解答

1、如何从字面正确理解weight decay的含义&#xff1f;它为何相当于L2范式正则化&#xff1f; 2、L2范数正则化对应贝叶斯统计里的哪个概念&#xff1f; 解答&#xff1a;http://blog.csdn.net/zouxy09/article/details/24971995/&#xff1b;http://t.hengwei.me/post/%E6%B5%…

搜索和数据分析引擎

https://www.elastic.co/cn/products/elasticsearch

mysql查询区分大小写

Mysql默认查询是不分大小写的&#xff0c;可以在SQL语句中加入binary来区分大小写。 binary不是函数&#xff0c;是类型转换运算符&#xff0c;它用来强制它后面的字符串为一个二进制字符串&#xff0c;可以理解为在字符串比较的时候区分大小写。 SELECT * FROM t_resource_inf…

(二)单元测试利器 JUnit 4

JUnit 深入 当然&#xff0c;JUnit 提供的功能决不仅仅如此简单&#xff0c;在接下来的内容中&#xff0c;我们会看到 JUnit 中很多有用的特性&#xff0c;掌握它们对您灵活的编写单元测试代码非常有帮助。Fixture 何谓 Fixture&#xff1f;它是指在执行一个或者…

.net平台的MongoDB使用

网址&#xff1a;http://www.cnblogs.com/skychen1218/p/6595759.html 前言 最近花了点时间玩了下MongoDB.Driver&#xff0c;进行封装了工具库&#xff0c;平常也会经常用到MongoDB&#xff0c;因此写一篇文章梳理知识同时把自己的成果分享给大家。 本篇会设计到Lambda表达式的…

2018程序员最佳ssh免费登陆工具

https://www.jianshu.com/p/b29b894aa60f Linux 终端 Screenshot from 2018-09-15 00-12-41.png PAC Screenshot from 2018-09-15 00-12-00.png 参考资料 讨论qq群144081101 591302926 567351477本文涉及的python测试开发库 谢谢点赞&#xff01;本文相关海量书籍下载 Wind…

Android Studio快捷键(MAC版)

用了AS一段时间了&#xff0c;感觉还是挺好用的&#xff0c;虽然还是有些小问题&#xff0c;但好处还是很明显的。。。 从Eclipse 转用AS最难受的估计就是快捷键了&#xff0c;整了好久才基本把个人在Eclipse上使用的快捷键给找差不多&#xff0c;但还是有些快捷键木有&#xf…

学习flex布局(弹性布局)

Flex是Flexible Box的缩写&#xff0c;意为弹性布局。是W3C早期提出的一个新的布局方案。可以便捷的实现页面布局&#xff0c;目前较高版本的主流浏览器都能兼容&#xff0c;兼容情况如下&#xff1a; Flex在移动端开发上已是主流&#xff0c;比如在h5页面&#xff0c;微信小程…