Jquery李炎恢——42自动补全UI【8】

学习要点：
1.调用autocomplete()方法
2.修改autocomplete()样式
3.autocomplete()方法的属性
4.autocomplete()方法的事件
5.autocomplete()中使用on()

自动补全，是一个可以减少用户输入完整信息的UI工具。一般在输入邮箱、搜索关键字等，然后提取出相应完整字符串供用户选择。

一、调用autocomplete()方法

$("#email").autocomplete({
source:["aaa@163.com","bbb@163.com","ccc@163.com"]
})

二、修改autocomplete()样式
由于autocomplete()方法是弹窗，然后鼠标悬停的样式。我们通过Firebug想获取到悬停时背景的样式，可以直接通过jquery.ui.css里面找到相应的css。
//无须修改ui里的css，直接用style.css替代掉
.ui.menu-item a .ui-state-focus{
background:url(../img/ui_header_bg.png);
}
注意：其他修改方案类似

三、autocomplete()方法的属性
自动补全方法有两种形式：1.autocomplete(options),options是以对象键值对的形式传参，每个键值对表示一个选项；2.autocomplete("action",param),action是操作对话框方法的字符串，param则是options的某个选项。
autocomplete外观选项
属性：disabled，默认值/类型：false/布尔值，说明：设置为true，将禁止显示自动补全。
属性：source，默认值/类型：无/数组，说明：指定数据源，可以是本地的，也可以是远程的。
属性：minLength，默认值/类型：1/数值，说明：默认为1，触发补全列表最少输入字符数。
属性：delay，默认值/类型：300/数值，说明：默认为300毫秒，延迟显示设置。
属性：autoFocus，默认值/类型：false/布尔值，说明：设置为true时，第一个项目会自动被选定。

$("#email").autocomplete({

   source:["aaa@163.com","bbb@163.com","ccc@163.com"]，

   disabled:false,

   minLength:2,

   delay:50,

   autoFocus:true

})

autocomplete页面位置选项
属性：position，默认值/类型：无/对象，说明：使用对象的键值对赋值，有两个属性：my和at表示坐标。my是以目标点左上角为基准，at以目标点右下角为基准。

$("#email").autocomplete({

  position:{

     my:"left  center",

     at:"right  center"

  }

})

四、autocomplete()方法的事件
除了属性设置外，autocomplete()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回调函数，这些回调函数中的this值等于对话框内容的div对象，不是整个对话框的div.

autocomplete事件选项
事件名：create，说明：当自动补全被创建时会调用create方法，该方法有两个参数（event，ui）。此事件中的ui参数为空。
事件名：open，说明：当自动补全被显示时，会调用open方法，该方法有两个参数（event，ui）。此事件中的ui参数为空。
事件名：close，说明：当自动补全被关闭时，会调用close方法,该方法有两个参数（event，ui）。此事件中的ui参数为空。
事件名：focus，说明：当自动补全获取焦点时，会调用focus方法,该方法有两个参数（event，ui）。此事件中的ui有一个子属性对象item，分别有两个属性：label,补全列表显示的文本：value，将要输入框的值，一般label和value值相同。
事件名：select，说明：当自动补全被选定时，会调用select方法,该方法有两个参数（event，ui）。此事件中的ui有一个子属性对象item，分别有两个属性：label,补全列表显示的文本：value，将要输入框的值，一般label和value值相同。
事件名：change，说明：当自动补全失去焦点且内容发生改变时，会调用change方法，该方法有两个参数（event，ui）。此事件中的ui参数为空。
事件名：search，说明：当自动补全搜索完成后，会调用select方法，该方法有两个参数（event，ui）。此事件中的ui参数为空。
事件名：response，说明：当自动补全搜索完成后,在菜单显示之前，会调用response方法，该方法有两个参数（event，ui），此事件中的ui参数有一个子对象content,他会返回label和value值，可通过遍历了解。

$("#email").autocomplete({

  source:["aaa@163.com","bbb@163.com","ccc@163.com"]，

   disabled:false,

   minLength:1,

   delay:0,

   focus:function(e, ui){

       alert("获取焦点！")；

       alert("ui.item.label");

      ui.item.value=123;

   },

   select:function(){

      alert("选定一个项目！")；

   }，

   change:function(){

     alert("改变！") 

   }，

  search:function(){

     alert("搜索完毕！")

  }，

  response:function(e,ui){

     alert("搜索完毕！")；

     alert(ui.content[i].label)

  }

});

autocomplete("action",param)方法
方法：autocomplete（"close"）,返回值：jquery对象，说明：关闭自动补齐
方法：autocomplete（"disable"）,返回值：jquery对象，说明：禁用自动补齐
方法：autocomplete（"enable"）,返回值：jquery对象，说明：启用自动补齐
方法：autocomplete（"destroy"）,返回值：jquery对象，说明：删除自动补齐，直接阻断
方法：autocomplete（"widget"）,返回值：jquery对象，说明：获取自动补的jquery对象
方法：autocomplete（"search",value）,返回值：jquery对象，说明：在数据源获取匹配的字符串
方法：autocomplete（"option",param）,返回值：一般值，说明：获取option属性的值
方法：autocomplete（"option",param，value）,返回值：jquery对象，说明：设置option属性的值

//关闭自动补全
$("#email").autocomplete("close")

//禁用自动补全
$("#email").autocomplete("disable")

//启用自动补全
$("#email").autocomplete("enable")

//删除自动补全
$("#email").autocomplete("destroy")

//获取自动补全jquery对象
$("#email").autocomplete("widget")

//设置自动补全search
$("#email").autocomplete("search","")

//获取某个options的param选项的值
var delay=$("#email").autocomplete("option","delay");
alert(delay);

//设置某个options的param选项的值
$("#email").autocomplete("option","delay"，0);

五、autocomplete中使用on()
在autocomplete的事件中，提供了使用on()方法处理的事件方法
on()方法触发的对话框事件
事件名称：autocompleteopen，说明：显示时触发
事件名称：autocompleteclose，说明：关闭时触发
事件名称：autocompletesearch，说明：查找时触发
事件名称：autocompletefocus，说明：获得焦点时触发
事件名称：autocompleteselect，说明：选定时触发
事件名称：autocompletechange，说明：改变时触发
事件名称：autocompleteresponse，说明：搜索完毕后，显示之前
$("#reg").on("autocomplete",function(){
   alert("打开时触发！")
});