jQuery Autocomplete简介_动力节点Java学院整理

jQuery UI Autocomplete是jQuery UI的自动完成组件，是我用过的最强大、最灵活的Autocomplete，它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据。

支持的数据源

jQuery UI Autocomplete主要支持字符串Array、JSON两种数据格式。

普通的Array格式没有什么特殊的，如下：

["bjpowernode","动力节点","李四"]

对于JSON格式的Array，则要求有：label、value属性，如下：

[{label: "动力节点", value: "bjpowernode"}, {label: "李四", value: "李四"}]

其中label属性用于显示在autocomplete弹出菜单，而value属性则是选中后给文本框赋的值。

如果没有指定其中一个属性则用另一个属性替代(即value和label值一样)，如下：

[{label: "bjpowernode"}, {label: "李四"}][{value: "bjpowernode"}, {value: "李四"}]

如果label和value都没有指定，则无法用于autocomplete的提示。

另外需要注意，对于从服务器端输出的JSON的key必须用双引号，如下：

[{"label": "动力节点", "value": "bjpowernode"}, {"label": "李四", "value": "李四"}]

否则可能会出现parsererror错误。

主要的参数

jQuery UI Autocomplete常用的参数有：

1.Source：用于指定数据来源，类型为String、Array、Function

String：用于ajax请求的服务器端地址，返回Array/JSON格式 Array：即字符串数组 或 JSON数组 Function(request, response)：通过request.term获得输入的值，response([Array])来呈现数据；(JSONP是这种方式)

2.minLength：当输入框内字符串长度达到minLength时，激活Autocomplete

3.autoFocus：当Autocomplete选择菜单弹出时，自动选中第一个

4.delay：即延迟多少毫秒激活Autocomplete

其他不常用的就不罗列了。

使用方法

假如页面上有以下输入框：

<input type="text" id="autocomp" /> 

AJAX请求
通过指定source为服务器端的地址来实现，如下：

$("#autocomp").autocomplete({  source: "remote.ashx",  minLength: 2});

然后在服务器端接收，并输出相应结果，注意默认传递的参数名称为term：

public void ProcessRequest(HttpContext context) {   // 查询的参数名称默认为term   string query = context.Request.QueryString["term"];   context.Response.ContentType = "text/javascript";   //输出字符串数组 或者 JSON 数组   context.Response.Write("[{/"label/":/"动力节点/",/"value/":/"bjpowernode/"},{/"label/":/"李四/",/"value/":/"李四/"}]"); }