>

基于jQuery实现select下拉选择可输入附源码下载

- 编辑:正版管家婆马报彩图 -

基于jQuery实现select下拉选择可输入附源码下载

笔者们清楚,一般select下拉框是不得不选拔的,不可能用来输入内容的。而临时大家会遇见下拉框中并未有要挑选的新闻项也许下拉摘取比较多时,我们能够让select产生text,允许客商输入想要的原委,同期还足以在输入的时候将蕴涵关键字的项也列出来,供高速选用。

根据jQuery完毕select下拉挑选可输入附源码下载,jqueryselect

我们知道,一般select下拉框是只好选取的,不可能用来输入内容的。而一时大家会遇见下拉框中尚无要挑选的新闻项或然下拉摘取极度多时,大家得以让select产生text,允许客商输入想要的源委,同一时候还是能在输入的时候将包蕴关键字的项也列出来,供高速选取。

图片 1

翻开演示效果            源码下载

正文将用实例和我们享受一款基于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!"); 
} 
}); 

如上内容给我们分享了着力代码,供给源码的爱侣能够直接下载哦。

图片 2

你恐怕感兴趣的稿子:

  • asp select下拉菜单选拔图标并实时展现
  • input+select(multiple) 达成下拉框输入值
  • select下拉选择框美化达成代码(js+css+图片)
  • jquery撤废选用select下拉框示例代码
  • js自动查找select下拉的美食指南并接纳(示例代码)
  • 三个科学的仿携程自定义数据下拉精选select
  • js实现Select下拉框具有输入效用的办法
  • JS实现的5级联合浮动Select下拉选用框实例
  • jQuery完成丰富实用美貌的select下拉菜单选拔效果

大家清楚,一般select下拉框是只好选用的,不能够用来输入内容的。而有时大家会遇...

翻看演示效果            源码下载.rar)

本文将用实例和豪门大饱眼福一款基于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!"); 
} 
}); 

如上内容给我们享受了着力代码,必要源码的相恋的人能够直接下载哦。

你也许感兴趣的稿子:

  • 依据jQuery的select下拉框选取触发事件实例深入分析
  • jQuery达成下拉框多选 jquery-multiselect 的实例代码
  • jQuery使用Selectator插件完结多选下拉列表过滤框(附源码下载)
  • jQuery落成充足实用美貌的select下拉菜单选择效果
  • jQuery结合CSS制作精美的select下拉菜单
  • JQuery select(下拉框)操作方法汇总
  • jQuery扁平化风格下拉框美化插件FancySelect使用指南
  • Jquery多选下拉列表插件jquery multiselect功用介绍及选择
  • jquery multiSelect 多选下拉框
  • jQuery落成Select下拉列表举行情形采纳效用

本文由关于计算机发布,转载请注明来源:基于jQuery实现select下拉选择可输入附源码下载