JQuery UI 是以 JQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件,这些控件主要包括:Accordion,Autocomplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等,其中Autocomplete能够非常容易的帮我们实现类似于百度搜索的智能提示功能。最新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为选中的项。