前言
jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控件，并且还可以定制Web UI的主题风格。从而可以应用它轻松地构建出高度可交互的Web 应用程序的UI界面。
随着Web应用的普及及AJAX相关应用的深入，客户端和Web服务器端需要频繁地交互数据，对Web交互的界面也提出了新的要求——简洁、方便、人性化等用户体验度高；同时随着移动设备的普及，客户端的访问设备也逐渐多样化。如何为不同的客户端设备提供统一的Web应用界面，从而提高开发效率和降低开发成本。目前比较好的技术实现手段是应用JQuery及JQuery UI系统库相关的技术。
作者根据自身多年的软件开发实践和经验总结，结合多年的IT职业培训的教学和高校软件学院一线的教学工作体验，在本系列文档中通过具体的程序代码示例为读者介绍jQuery UI中典型的应用组件技术。本文档为jQuery UI autoComplete自动补全组件的应用基础，主要涉及jQuery UI autoComplete自动补全组件的技术特性、主要的成员属性及应用示例、主要事件及应用示例，并给出一个体现autoComplete组件基本特性的应用示例以及如何应用AJAX技术获得远程服务器返回的匹配结果示例等方面的内容。
杨教授大学堂精心创作有系列化的优秀程序员职业提升必读技术资料，这些资料将系统地从软件设计和开发实现的“设计思想”、“管理策略”、“技术实现”和“经验方法”等方面与读者进行充分的交流，涉及作者
对软件开发设计思想和原则、课程设计、项目实训、软件实现技术等方面的学习心得体会和应用技巧、经验总结。
本文目录
1.1autoComplete自动补全组件 (3)
1.1.1autoComplete组件的技术特性 (3)
1.1.2autoComplete组件的主要成员属性source及应用示例 (5)
1.1.3autoComplete组件的其它属性 (14)
1.1.4autoComplete组件的主要事件及应用示例 (19)
1.2Autocomplete组件的应用示例 (24)
1.2.1体现autoComplete组件基本特性的应用示例 (24)
1.2.2应用AJAX技术获得远程服务器返回的匹配结果示例 (26)
1.1autoComplete自动补全组件
1.1.1autoComplete组件的技术特性
1、Autocomplete也称为自动补全
自动补全的功能是许多系统中都提供的一个提升用户输入体验的功能，当操作者在某个输入框中输入相关的数据（如查询关键字）等，系统将自动都匹配用户的输入数据，并在下拉列表中显示可能的各个匹配的完整数据项目。供用户选择，大大提升用户体验。
如在百度搜索页面中输入相关的关键字的一部分内容时，百度搜索系统将提供可能匹配的完整的关键字以减少用户的输入——如下图所示，在Windows系统中叫做“自动完成”。
2、autoComplete组件的主要功能特性
jQuery UI autoComplete组件为Web开发者提供有自动补全的完整的功能实现，它不仅支持本地的普通数组的数据源，也还支持本地的JSON格式的数组的数据源；数据源也可以通过jQuery ajax请求远程Web服务器端相关程序返回的数据。
3、jqueryui/autocomplete/提供的示例
（1）技术帮助文档
在技术帮助文档中详细地对autoComplete组件的主要属性、事件和方法都提供了相关的说明文档，读者在应用autoComplete组件时可以随时查看相关的技术帮助文档以解决在应用开发中所遇到的技术问题。
（2）典型的应用示例
JQuery UI不仅提供了详细的技术帮助文档资料，也还提供有典型的应用示例，为读者展示在典型
的应用需求下如何应用autoComplete组件以及如何满足应用的需要的示例。作者在写本系列文档资料
时，也多次参考JQuery UI中所提供的autoComplete组件的应用示例，并对其中的一些示例进行了改进
和完善。
jquery在线库
1.1.2autoComplete组件的主要成员属性source及应用示例
1、source成员属性是autoComplete组件的最重要的属性
（1）主要的功能
source成员属性主要定义autoComplete组件的数据源，当然这些数据源一般应该来自于Web服务器端相关的程序。
（2）属性值的数据类型
JQuery提供多种不同的方式提供“自动补全”的数据源，该成员属性为必须的属性，可以为如下的三种类型：
1)数组Array
2)字符串String
3)目标函数Function( Object request, Function response( Object data ) )
2、source成员属性为数组Array类型的值及示例
（1）字符串数组及应用示例
当autoComplete组件的数据来源为数组Array类型的值时，可以使用如下的两种形式的数组——字符串数组和对象数组。字符串数组一般采用形式为[ "someOneAutoComplete", "someTwoAutoComplete" ] 等格式提供“自动补全”的数据源。
此时在自动补全的下拉菜单中显示的内容和自动补全时自动填充到文本输入框的内容相同，并且都为字符串数组中的成员元素值。如下为source成员属性为字符串数组类型值的应用示例。
<!doctype html>
<html>
<head>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。