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

 

支持的数据格式

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

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

 
  
  1. ["cnblogs","博客园","囧月"] 
 
  
 
   
 
    
 
     ? 
    
 
   
 
  
 
  
 对于JSON格式的Array，则要求有：label、value属性，如下：
 
  
 
  
  1. [{label: "博客园", value: "cnblogs"}, {label: "囧月", value: "囧月"}] 
 
  
其中label属性用于显示在autocomplete弹出菜单，而value属性则是选中后给文本框赋的值。
 
  
如果没有指定其中一个属性则用另一个属性替代(即value和label值一样)，如下：
 
  
 
  
  1. [{label: "cnblogs"}, {label: "囧月"}] 
  2. [{value: "cnblogs"}, {value: "囧月"}] 
 
  
 
 
  
如果label和value都没有指定，则无法用于autocomplete的提示。
 
  
另外需要注意，对于从服务器端输出的JSON的key必须用双引号，如下：
 
  
 
  
  1. [{"label": "博客园", "value": "cnblogs"}, {"label": "囧月", "value": "囧月"}] 
 
  
 
 
  
 
 
  
 
  
jQuery UI Autocomplete常用的参数有：
 
  
  1. Source：用于指定数据来源，类型为String、Array、Function 
    
    1. String：用于ajax请求的服务器端地址，返回Array/JSON格式
     
    
    1. $( "#birds" ).autocomplete({ 
    2.       source: "search.action", 
    3.       minLength: 2,
    4. }); 
     
  2. Array：即字符串数组 或 JSON数组
 
  
 
  
  1. var availableTags = [ 
  2.      "ActionScript", 
  3.      "AppleScript", 
  4.      "Asp", 
  5.      "BASIC", 
  6.      "C", 
  7.      "C++", 
  8.      "Clojure", 
  9.      "COBOL", 
  10.      "ColdFusion", 
  11.      "Erlang", 
  12.      "Fortran", 
  13.      "Groovy", 
  14.      "Haskell", 
  15.      "Java", 
  16.      "JavaScript", 
  17.      "Lisp", 
  18.      "Perl", 
  19.      "PHP", 
  20.      "Python", 
  21.      "Ruby", 
  22.      "Scala", 
  23.      "Scheme" 
  24.    ]; 
  25.    $( "#tags" ).autocomplete({ 
  26.      source: availableTags 
  27.    }); 
 Function(request, response)：通过request.term获得输入的值，response([Array])来呈现数据；(JSONP是这种方式) 
  
 
  
  1. $( "#test" ).autocomplete({ 
  2.       source: function(request,response){ 
  3.           $.ajax({ 
  4.               url: "ajax2.action", 
  5.               dataType: "json", 
  6.               data: request, 
  7.               success: function(data){ 
  8.                   response($.map(data,function(val,i){ 
  9.                       return { 
  10.                           label: val.label, 
  11.                           value: val.value, 
  12.                       } 
  13.                   })); 
  14.               }, 
  15.                
  16.           }); 
  17.       },
  18.  }); 
 minLength：当输入框内字符串长度达到minLength时，激活Autocomplete autoFocus：当Autocomplete选择菜单弹出时，自动选中第一个 delay：即延迟多少毫秒激活Autocomplete