jquery 之 autocomplete 1.10.3

一、首先了解下autocomplete 提供的重要属性：
　　1. autoFocus：当智能提示框出现时，是否自动选中第一项，默认为false，即不选中。
　　2. delay：在按键后执行搜索的延时，默认为300ms。
      3. disabled：是否禁用自动完成功能，默认为false。
　　4. minLength：触发自动完成功能需要输入的最小字符数量。
　　5. source：即为指定智能提示下拉框中的数据来源，支持三种类型。
　　　　　Array，主要用于本地化数据提供，支持两种格式：字符串数              组 [ "Choice1", "Choice2" ]及标签和值属性的Json格式数   组 [ { label: "Choice1", value: "value1" }, ... ]
　　　　  String，用于ajax请求的远程地址链接，返回Array或Json格式字符串。
　　　　　Function，回调函数，最具有灵活性的一种方式，可用于返回任何数据源方式来实现自动完成，其中包含两个参数request，response通过request.term 来获取用户输入的值,通过response(argument)来对获取的数据源进行显示。


二、JQuery UI还提供了一些有用的方法：
　　1. close()：关闭智能提示选择框。　　
　　2. destroy()：销毁智能提示选择框，将其所产生的元素完全删除，使其恢复至初始状态。
　　3. disable()：禁用自动完成功能。
　　4. enable()：开启自动完成功能。


三、主要事件包括：
　　1. change(event, ui)：当值改变时发生，ui.item为选中的项。
　　2. close(event, ui)：当智能提示框关闭时发生。
　　3. create(event, ui)：当智能提示框创建时发生，可以在此事件中，对外观进行一些控制。
　　4. focus(event, ui)：当智能提示列表任意一项获得焦点时发生，ui.item为获得焦点的项。
　　5. open(event, ui)：当智能提示框打开或更新时发生。
　　6. response(event,ui)：在搜索完成后智能提示框显示前发生，可以在此事件中对显示项进行处理。
　　7. search(event, ui)： 在开始请求之前发生，可以在此事件中返回false来取消请求。
　　8. select(event, ui)：当智能提示框中任意一项被选中时发生，ui.item为选中的项。
常用有ui.item.id，ui.item.value和ui.item.label

一般显示事例比较简单，这里提供一个返回二维数组 的 php版：

$(document).ready(function(){
           /**/
           var auserUrl = web_url ;
           var sKey = $('#suid').val();
              $('#suid').autocomplete({
                  source:function(request, response){
                     // $.getJSON(auserUrl, request, function(data, status, xhr){
                          $.ajax({
                              url:auserUrl,
                              type:'POST',
                              dateType:'json',
                              data:{'sKey':request.term},
                              success:function(data, textStatus,jqSHR){
                                  data = eval("("+data+")");

                                 //通过map函数重新生成规定结构数组并返回
                              response($.map(data, function(item, index){
                                 // return item.aname;

                                  return {
                                      label: item.aname,
                                      value: item.aname,
                                      id:item.id
                                  }
                              }
                              ));
                           }
                          })
                  },
                  select: function( event, ui ) {
                      // 获取选中项对应的id
                      $('#h_suid').val(ui.item.id);
                      //console.log(ui.item.id);
                  }
               });

}