jqueryui之autocomplete

（转）

jquery ui 是以 jquery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件，这些控件主要包括：Accordion,Autocomplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等，其中Autocomplete能够非常容易的帮我们实现类似于百度搜索的智能提示功能。最新JQuery UI可以从JQuery UI官网下载获得。

一、首先了解下JQueryUI提供的重要属性：

　　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

四、一些个人积累

1，选中后清空

select:function(){
    //处理
    ui.item.value = '';
}

您可能感兴趣的文章：
再说AutoComplete自动补全之实现原理
jqueryui之autocomplete
jQuery UI Autocomplete 体验分享
jQuery自动完成插件 jQuery AutoComplete
Jquery AutoComplete自动完成 的使用方法实例
Flex AutoComplete
jQuery UI AutoComplete 使用说明
jQuery.autocomplete 支持中文输入(firefox)修正方法
jquery autocomplete自动完成插件的的使用方法
jQuery UI 教程之三 ——jquery ui datepicker的使用