`
zccst
  • 浏览: 3315958 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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 = '';
}
分享到:
评论

相关推荐

    JQuery UI之Autocomplete使用详解

    JQuery UI之Autocomplete使用详解

    jQuery UI Autocomplete是jQuery UI的自动完成组件

    在lwme-jqueryui-demo这个压缩包中,可能包含了多个示例文件,它们展示了Autocomplete的不同用法和配置,可以帮助开发者更好地理解和运用这个组件。通过学习这些示例,你可以掌握如何根据项目需求灵活定制...

    jquery-ui-autocomplete

    `jQuery UI Autocomplete`是基于`jQuery`库的一个强大组件,用于实现自动补全功能。这个组件能够极大地提升用户体验,特别是在需要用户输入特定信息时,如搜索框、表单字段等。`jQuery UI`提供了丰富的界面效果和...

    jquery.ui.autocomplete-Ajax

    例如,如果你只需要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`。...

    jqueryUI的Autocomplete实现代码

    **jQuery UI Autocomplete** 是一个强大的功能,它允许用户在输入框中输入文字时自动提示相关的建议信息。这个功能在各种网页应用中广泛使用,比如搜索引擎、表单填充、产品搜索等,极大地提升了用户体验。本篇文章...

    jquery.ui.autocomplete 扩展:无限下拉

    **jQuery UI Autocomplete 扩展:无限下拉** 在网页开发中,用户界面的交互性和易用性至关重要。jQuery UI库中的Autocomplete组件是实现这一目标的利器,它提供了自动补全功能,常用于搜索框或者输入框,帮助用户...

    jquery-ui autocomplete

    **jQuery UI Autocomplete** 是一个基于 jQuery 库的插件,用于实现自动补全功能,它为用户在输入框中输入内容时提供实时的建议列表。这个功能在各种 Web 应用中非常常见,比如搜索框、表单填充等,能够极大地提升...

    jquery UI实现autocomplete在获取焦点时得到显示列表功能示例

    在本示例中,我们将深入探讨如何使用jQuery UI库中的Autocomplete插件来实现一个功能,即当文本框获得焦点时立即显示下拉列表。这个功能对于提高用户体验非常有用,因为它允许用户快速浏览并选择先前输入过的选项,...

    jquery ui autocomplete

    在lwme-jqueryui-demo中,我们可以找到一个简单的jQuery UI Autocomplete的演示项目。这个项目展示了如何利用Autocomplete实现一个基本的搜索功能,用户在输入框中输入关键字,系统会从预设的词汇列表中匹配并显示...

    jQuery UI Autocomplete 体验分享

    jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大、最灵活的Autocomplete,它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据

    JQuery UI 中文帮助文档

    **jQuery UI 中文帮助文档详解** jQuery UI 是一个基于 jQuery JavaScript 库的开源项目,它提供了丰富的用户界面组件,使得开发者能够轻松创建交互性强、视觉效果美观的网页应用。这个中文帮助文档是针对jQuery UI...

    jquery.ui.autocomplete.js

    根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。 如需了解更多有关 autocomplete 部件的细节,请查看 API 文档 自动完成部件(Autocomplete Widget)。

    jQuery UI组件 jQuery UI

    **jQuery UI组件详解** jQuery UI 是一个强大的前端开发框架,基于流行的JavaScript库jQuery构建,它提供了丰富的用户界面组件,能够帮助开发者快速构建交互性、视觉吸引力强的网页应用。jQuery UI 包含了大量的...

    jquery 自动完成 Autocomplete

    你可以在[jQuery UI官网](https://jqueryui.com/)下载最新的版本。 ```html <!-- 引入jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jQuery UI --> ...

    JQueryUI,EasyUI一些控件的使用

    在JQueryUI中,你可以使用Autocomplete组件为输入框提供自动完成功能,这在搜索框或输入建议场景中非常有用。另外,Slider组件则可以创建滑动条,允许用户通过直观的方式选择数值或进行排序。 接下来,我们讨论Tab...

    jquery的autocomplete(自动补全)插件

    在本案例中,提供了`jquery-ui.js`文件,该文件不仅包含了jQuery UI的核心功能,还内置了`jquery.js`,这确保了对jQuery Autocomplete的支持。 **使用步骤:** 1. **引入依赖**:在HTML文件中,你需要在`<head>`...

    jQuery UI Autocomplete 1.8.16 中文输入修正代码

    在介绍知识点之前,首先需要明确jQuery UI的Autocomplete组件的基本概念以及其在处理中文输入时可能遇到的问题。 Autocomplete组件允许用户快速找到并选择输入框中的某个选项,当用户开始键入时,组件会根据用户...

    jquery-ui-autocomplete.zip

    在写一个输入框提示内容的功能时,找到了jQuery autocomplete自动补齐这个插件,如获至宝,但是从网上下载后自己用起来总是出问题,原来他只匹配jQuery1.7以下的版本,但是我的其他插件要用jQuery3的版本,这时候就...

    JQUERY 自动完成autocomplete

    你可以从官方网站(https://jqueryui.com/)下载最新版本,或者通过 CDN 链接引入: ```html <!-- 引入 jQuery --> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <!-- 引入 jQuery UI --...

Global site tag (gtag.js) - Google Analytics