作者: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 = '';
}
分享到:
相关推荐
JQuery UI之Autocomplete使用详解
在lwme-jqueryui-demo这个压缩包中,可能包含了多个示例文件,它们展示了Autocomplete的不同用法和配置,可以帮助开发者更好地理解和运用这个组件。通过学习这些示例,你可以掌握如何根据项目需求灵活定制...
`jQuery UI Autocomplete`是基于`jQuery`库的一个强大组件,用于实现自动补全功能。这个组件能够极大地提升用户体验,特别是在需要用户输入特定信息时,如搜索框、表单字段等。`jQuery UI`提供了丰富的界面效果和...
例如,如果你只需要Autocomplete功能,可以使用`ui/themes/base/core.css`,`ui/themes/base/autocomplete.css`,`ui/jquery.ui.core.js`和`ui/jquery.ui.widget.js`,以及`ui/jquery.ui.autocomplete.js`。...
**jQuery UI Autocomplete** 是一个强大的功能,它允许用户在输入框中输入文字时自动提示相关的建议信息。这个功能在各种网页应用中广泛使用,比如搜索引擎、表单填充、产品搜索等,极大地提升了用户体验。本篇文章...
**jQuery UI Autocomplete 扩展:无限下拉** 在网页开发中,用户界面的交互性和易用性至关重要。jQuery UI库中的Autocomplete组件是实现这一目标的利器,它提供了自动补全功能,常用于搜索框或者输入框,帮助用户...
**jQuery UI Autocomplete** 是一个基于 jQuery 库的插件,用于实现自动补全功能,它为用户在输入框中输入内容时提供实时的建议列表。这个功能在各种 Web 应用中非常常见,比如搜索框、表单填充等,能够极大地提升...
在本示例中,我们将深入探讨如何使用jQuery UI库中的Autocomplete插件来实现一个功能,即当文本框获得焦点时立即显示下拉列表。这个功能对于提高用户体验非常有用,因为它允许用户快速浏览并选择先前输入过的选项,...
在lwme-jqueryui-demo中,我们可以找到一个简单的jQuery UI Autocomplete的演示项目。这个项目展示了如何利用Autocomplete实现一个基本的搜索功能,用户在输入框中输入关键字,系统会从预设的词汇列表中匹配并显示...
jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大、最灵活的Autocomplete,它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据
**jQuery UI 中文帮助文档详解** jQuery UI 是一个基于 jQuery JavaScript 库的开源项目,它提供了丰富的用户界面组件,使得开发者能够轻松创建交互性强、视觉效果美观的网页应用。这个中文帮助文档是针对jQuery UI...
根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。 如需了解更多有关 autocomplete 部件的细节,请查看 API 文档 自动完成部件(Autocomplete Widget)。
**jQuery UI组件详解** jQuery UI 是一个强大的前端开发框架,基于流行的JavaScript库jQuery构建,它提供了丰富的用户界面组件,能够帮助开发者快速构建交互性、视觉吸引力强的网页应用。jQuery UI 包含了大量的...
你可以在[jQuery UI官网](https://jqueryui.com/)下载最新的版本。 ```html <!-- 引入jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jQuery UI --> ...
在JQueryUI中,你可以使用Autocomplete组件为输入框提供自动完成功能,这在搜索框或输入建议场景中非常有用。另外,Slider组件则可以创建滑动条,允许用户通过直观的方式选择数值或进行排序。 接下来,我们讨论Tab...
在本案例中,提供了`jquery-ui.js`文件,该文件不仅包含了jQuery UI的核心功能,还内置了`jquery.js`,这确保了对jQuery Autocomplete的支持。 **使用步骤:** 1. **引入依赖**:在HTML文件中,你需要在`<head>`...
在介绍知识点之前,首先需要明确jQuery UI的Autocomplete组件的基本概念以及其在处理中文输入时可能遇到的问题。 Autocomplete组件允许用户快速找到并选择输入框中的某个选项,当用户开始键入时,组件会根据用户...
在写一个输入框提示内容的功能时,找到了jQuery autocomplete自动补齐这个插件,如获至宝,但是从网上下载后自己用起来总是出问题,原来他只匹配jQuery1.7以下的版本,但是我的其他插件要用jQuery3的版本,这时候就...
你可以从官方网站(https://jqueryui.com/)下载最新版本,或者通过 CDN 链接引入: ```html <!-- 引入 jQuery --> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <!-- 引入 jQuery UI --...