combox 轻量级下拉框组件：API、配置与使用指南

combox 组件简介

简介

该组件旨在提供最小化的 JavaScript 代码实现 combox 功能，其页面原型参考了 Dojo 的 combox 样式。它支持键盘交互操作以及数据的自动筛选和高亮显示功能。

API 与初始化方法

API

初始化方法

编码方式

可以通过 JavaScript 代码进行初始化：var c=new combox(document.getElementById('a'));

或者

在初始化时传入配置对象，例如：var c=new combox(document.getElementById('a'),{ debug:true });

Css申明方式

也可以通过 HTML 标签属性进行声明：<select class="combox" debug="true">

只要 select 元素的 class 属性中包含 combox 即可，即使同时包含其他样式类也不受影响。例如：

<select class="abc combox def">

这种写法同样有效。

配置参数详解

配置参数说明

combox 支持以下配置参数：

debug: true/false，用于控制是否显示原始的 select 元素。

searchMode: 0 表示模糊搜索（不区分大小写），1 表示前缀搜索（不区分大小写）。

remoteSourceUrl: 指定远程数据源的 URL，返回的 JSON 格式应如下所示：

{"text":"a","value":"b"}, {"text":"a1","value":"b1"}

remoteFilterUrl: 指定筛选时读取的远程 URL，参数格式为 xxxx?asdasd=~!value!~，其中 ~!value!~ 为宏占位符，触发时会被替换为当前输入框的值。

allowAnyValue: 默认为 false，表示不允许输入 options 范围外的数据。

displayValue: 定义 combox 的显示值。当 displayValue 在 options 中能找到对应的 value 时，显示该 option 的 text；否则直接显示 displayValue 本身。

pleaseSelect: 当 combox 的 txtBox 值为 pleaseSelect 指定的文本时，下拉展开将显示所有 options。

mouseDblClick: 0 表示单击触发，1 表示双击触发。

配置示例

举例:

JavaScript 初始化示例：var c=new combox(document.getElementById('a'),{

allowAnyValue:true,

pleasSelect:'请选择',

debug:true })

或者

HTML 声明示例：<select class="combox" allowAnyValue="true" pleasSelect="请选择" debug="true">

上述写法亦可生效。

项目资源与演示

项目的google code地址

http://code.google.com/p/enhancehtml/

效果

演示地址http://demo.jb51.net/js/combox/demo.htm

下载地址http://jb51.net/jiaoben/25840.html