可以输入也可以下拉选择的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
可以输入也可以下拉选择的select相关推荐
- winform 如何让 comboBox1 不能输入,只能下拉选择
winform 如何让 comboBox1 不能输入,只能下拉选择 让 comboBox1 不能输入,只能下拉选择 吧我们 DropDownStyle 属性改一下,改成 DropDownList
- Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
- layui 带按钮的搜索框_layui table可输入关键字搜索下拉框(select)
layui-table-column-select 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 一.介绍 此项目是为了解决layui table表格单元格(col ...
- input下拉选择框可以自行输入也可以下拉选择
我这里使用的是原生H5标签 datalist <input class="browsers" list="browsers"><datalis ...
- 【react】【antd】一个既可以自定义输入又可以下拉选择的输入框
可以利用antd中的AutoComplete组件实现 <AutoCompletedataSource={['10','20','30','40','50','60','70','80','90' ...
- layui table勾选框的修改_layui表格(Table)下添加可更新拉选择框select
添加CSS 防止下拉框被遮挡 /* 防止下拉框下拉值被遮盖*/ .layui-table-cell { overflow: visible; } .layui-table-box { overflow ...
- Vue - Ant Design Vue 中 <a-select> 选择器组件,既可从下拉列表选择,又可输入手动输入文本(既可下拉选择又可自己输入)
前言 网上的代码基本上都是无效的,且代码非常乱还有bug. 这种需求其实不算太常见,网上基本没有相关文章, 本文给您提供一样详细的示例,您可以快速移植到您的项目中. 如果您要实现如下图所示 既可下拉选 ...
- 自定义组合控件:下拉选择框
Spinner 自定义组合控件之下拉选择框 项目概述 下拉选择框主要是通过在EditText 下用PopupWindow 动态显示ListView 控件来实现的.下拉选择框可以方便用户的输入效率,以此 ...
- 开发一个出生年份的下拉选择框供用户选择_你的下拉式菜单设计对了吗?
追波范儿(dribbbledesign)------------------------------------------- 下拉菜单主要有两种类型:1. 用于导航的下拉菜单:2. 用于表单的下拉菜 ...
最新文章
- 目标检测的二十年发展史—从传统方法到深度学习
- 95 后哈佛小哥撰写《从零开始的机器学习》,入门必备,书籍资源已开放
- Pandas的学习(4.DataFrame之间的运算以及DataFrame和Series之间的运算)
- Qt文档阅读笔记-Qt插件DECLARE_INTERFACE METADATA INTERFACES官方解析及实例
- 汇编:LEA(取偏移地址)、LES
- Android开源库--Gson谷歌官方json解析库
- nodejs脚本后台运行
- 802.1QCC TSN配置模型
- LabVIEW编程LabVIEW开发Agilent 4294A 例程与相关资料
- caffe+报错︱深度学习参数调优杂记+caffe训练时的问题+dropout/batch Normalization
- word2019技巧:段落的段前段后单位行设置为磅
- 计算机数学的外文翻译,计算机 数学 外文翻译 外文文献 英文文献 模糊随机森林.doc...
- mysql定时任务的实现
- 拼多多蓝海词数据分析:如何优化拼多多关键词?拼多多标题关键词优化方法。
- 华为MateBook D14 安装ubuntu16 wifi、蓝牙、触控板驱动问题解决
- 【含答案】心田花开:小学一年级语文上册期中试卷
- 大叔学编程,学的还是易语言
- 本人的嵌入式职业英文记录 - 第2周
- php实现自动播放ppt,JavaScript_jquery实现简单的自动播放幻灯片效果,本文实例讲述了jquery实现简单 - phpStudy...
- SDL Trados 2019 和 SDL Trados 2021 最新版本的下载地址 (2021年七月更新)
热门文章
- MySQL之数据库对象查看工具mysqlshow
- hibernate select语句返回的类型
- JavaBean技术的一些讲解
- 图像特征 可视化_使用卫星图像可视化建筑区域
- leetcode 1631. 最小体力消耗路径(并查集)
- python缓冲区_如何在Python中使用Google的协议缓冲区
- 响应式网站设计_通过这个免费的四小时课程,掌握响应式网站设计
- 硕士可以跟别的导师做实验吗_如何成为一名导师可以成为双刃剑
- Bootstrap教程:学习构建第一个Bootstrap 4网站
- python网络爬虫(5)BeautifulSoup的使用示范