css3搜索框呼出键盘,jQuery支键盘控制和选项搜索的下拉列表框插件

combo-select是一款jQuery支键盘控制和列表选项搜索的下拉列表框jQuery插件。该下拉列表框插件支持键盘控制，支持在列表选项中进行搜索过滤。在移动数据和平板电脑上会回退为原生的select列表框。它的特点有：

可以对下拉列表选项进行搜索过滤。

对移动手机和平板电脑友好(回退为原生select下拉框)

可以使用键盘来控制

样式可以完全自定义

支持dada属性

支持数字和字符串两种数据类型

支持隐含的style属性

使用方法

HTML结构

使用普通的下拉列表框结构即可：

Select value

1

2

初始化插件

$('select').comboSelect({

comboClass : 'combo-select', /* outer container class */

comboArrowClass : 'combo-select-arrow', /* arrow class */

comboDropDownClass : 'combo-drop-down', /* dropdown class */

inputClass : 'combobox-input text-input', /* Input element class */

disabledClass : 'option-disabled', /* Disabled class */

hoverClass : 'option-hover', /* dropdown list hover class */

selectedClass : 'option-selected', /* dropdown list selected class */

markerClass : 'combo-marker', /* Search marker class */

maxHeight : 200, /* Max height of dropdown */

themeClass : '', /* Theme using external classes */

extendStyle : true /* Copy all inline styles from original select */

})

普通的select下拉框进过转换后得到下面的HTML代码：

配置参数

comboClass：包裹容器的class名称。

comboArrowClass：下拉框箭头的class名称。

comboDropDownClass：下拉列表的class名称。

inputClass：input元素的class名称。

disabledClass：禁用状态时的class名称。

hoverClass：鼠标滑过时的class名称。

selectedClass：被选择的下拉列表的class名称。

markerClass：搜索标签的class名称。

maxHeight：下拉列表的最大高度。

themeClass：使用外部主题的class名称。

extendStyle：是否从原生select下拉列表框中复制所有的内联样式。

浏览器兼容

Internet Explorer IE 8+

Chrome

Firefox

Opera

Safari

iOS

Android

IE Mobile