jqueryui之autocomplete

作者:zccst(转)




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)