博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQueryUI之Autocomplete
阅读量:5100 次
发布时间:2019-06-13

本文共 1371 字,大约阅读时间需要 4 分钟。

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,回调函数,最具有灵活性的一种方式,可用于返回任何数据源方式来实现自动完成,其中包含两个参数requestresponse通过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为选中的项。

转载于:https://www.cnblogs.com/tudou1223/p/6014913.html

你可能感兴趣的文章
AutoCAD实用技巧基础篇
查看>>
Junit测试工具
查看>>
ubuntu 系统环境配置记录
查看>>
C# 流总结
查看>>
org.apache.hadoop.mapreduce.lib.input.InvalidInputException: Input path does not exist: file:/input
查看>>
jumpserver安装与部署
查看>>
《算法4》回顾(一)
查看>>
Repeater用ul li,一行显示多条数据
查看>>
Java并发(四):并发集合ConcurrentHashMap的源码分析
查看>>
5. Longest Palindromic Substring
查看>>
Maven 三种archetype说明
查看>>
oracle自关联表的子删父变功能实现
查看>>
程序员需要具备的基本技能
查看>>
jsoncpp cmake
查看>>
Web消息主体风格(Message Body Style)
查看>>
eclipse- 智能提示设置
查看>>
回调函数实例——数学计算
查看>>
C#文件路径乱码
查看>>
俞伯牙摔琴谢知音的故事
查看>>
【简单dp】2080->最长公共子序列问题 动态规划
查看>>