jquery ui autocomplete widget

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

 

支持的数据格式

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

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

["cnblogs","博客园","�逶�"]

?

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

[{label: "博客园", value: "cnblogs"}, {label: "�逶�", value: "�逶�"}]

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

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

[{label: "cnblogs"}, {label: "�逶�"}]
[{value: "cnblogs"}, {value: "�逶�"}]

 

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

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

[{"label": "博客园", "value": "cnblogs"}, {"label": "�逶�", "value": "�逶�"}]

 

 

jQuery UI Autocomplete常用的参数有：

1. Source：用于指定数据来源，类型为String、Array、Function
   1. String：用于ajax请求的服务器端地址，返回Array/JSON格式

   $( "#birds" ).autocomplete({
         source: "search.action",
         minLength: 2,
   });

   2. Array：即字符串数组 或 JSON数组

   var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
      ];
      $( "#tags" ).autocomplete({
        source: availableTags
      });

   3. Function(request, response)：通过request.term获得输入的值，response([Array])来呈现数据；(JSONP是这种方式)

   $( "#test" ).autocomplete({
         source: function(request,response){
             $.ajax({
                 url: "ajax2.action",
                 dataType: "json",
                 data: request,
                 success: function(data){
                     response($.map(data,function(val,i){
                         return {
                             label: val.label,
                             value: val.value,
                         }
                     }));
                 },
   
             });
         },
    });

2. minLength：当输入框内字符串长度达到minLength时，激活Autocomplete
3. autoFocus：当Autocomplete选择菜单弹出时，自动选中第一个
4. delay：即延迟多少毫秒激活Autocomplete