实现基于jQuery的select下拉选择 可随源代码下载

我们知道，一般情况下，选择下拉框只能选择，不能用来输入内容。有时候下拉框里没有需要选择的信息项或者下拉选项太多的时候，我们可以把select变成text，让用户输入想要的内容，同时我们也可以列出包含关键字的项进行快速选择。

查看演示效果源代码下载。

本文将结合实例与大家分享一个基于jQuery的下拉框插件，允许用户输入内容，同时下拉选项会及时匹配相关选项，支持键盘操作和html选项内容。当然，下拉过程也可以是动画的。让我们看看如何使用它。

HTML结构

下面是一个基本的选择下拉框。

Select id=' editable-select '可选fa Romeo /option选项Audi /option选项中国人民银行/option选项中国人/option选项中国/option BMW/option/Select还需要加载jQuery库和jquery.editable-select.js文件，该文件已经在源码下载包中。

jQuery

只需要下面的代码，就可以实现传统的下拉框变成具有输入功能的下拉框。

$(' #可编辑-选择')。editableSelect({ effects 3360 ' slide ' })；实际上，如果我们仔细查看插件代码，我们会发现作者已经处理了原始的select，并将其更改为输入表单文本和列表ul。可以通过这种方式输入文本，下拉选项使用ul panel，这样任何html代码都可以添加到ul中的选项中。演示中有例子。然后，利用CSS和js技术，实现下拉和弹出、输入、搜索和匹配等功能。

选项设置

过滤：过滤，即输入内容时，下拉选项会匹配输入的字符，支持中文、真/假，默认为真。效果：动画效果。当弹出的下拉选择框被触发时，下拉框显示过渡效果。有三个值：默认、滑动和淡入，默认值是default。持续时间：下拉选项框中显示的转场动画速度包括快、慢和数字(毫秒)，默认为快。

事件

OnCreate:输入时触发。OnShow:下拉时触发。现有：下拉框隐藏时触发。开：当下拉框中的选项被选中时触发。

事件调用方法：

$(' #可编辑-选择')。可编辑选择({ onSelect:函数(元素){ alert('Selected！');} });以上内容已经为大家分享了核心代码。需要源代码的朋友可以直接下载。