jQuery，无需多作介绍，相信各位读者都应该接触或使用过了。jQuery UI，简而言之，它是一个基于jQuery的前端UI框架。我们可以使用jQuery + jQuery UI非常简单方便地制作出界面美观、功能强大、跨浏览器兼容的前端html界面。
今天，我们就来介绍jQuery UI中一个功能非常强大的部件Autocomplete。
Autocomplete，是一个功能强大的自动完成输入的jQuery插件，它也是jQuery UI的一部分。相信用过百度或者Google搜索的读者一定不会陌生，当我们在搜索框中开始输入搜索的关键字时，搜索引擎就会智能地帮我们联想并匹配我们所需的搜索关键字内容。
Google搜索输入框的自动完成功能
现在，我们使用jQuery UI的Autocomplete部件就可以非常简单方便地实现如上述图片中Google搜索框所具备的自动完成功能。
jQuery UI 的当前最新版本为1.10.4。由于不同版本之间的用法也有所差异，其他网站关于之前版本的Autocomplete用法介绍并不能完全适用于最新版本。因此，我们有必要了解一下jQuery UI Autocomplete的最新用法。
在使用Autocomplete实现自动完成功能之前，我们先来完成一些准备工作。比如，先编写包含如下代码的html文件：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>jQuery Autocomplete入门示例</title> </head> <body> <label for="language">请输入指定的语言：</lable> <input id="language" name="language" type="text"> </body> </html>对应的运行效果如下：
input.png
在完成上述准备工作之后，我们需要在html代码中引入jQuery UI的js文件和css文件，由于jQuery UI是依赖于jQuery的，因此我们还需要在引入jQuery UI之前引入jQuery。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>jQuery Autocomplete入门示例</title> <!-- 引入jQuery UI的css文件 --> <link href="" /> <!-- 引入jQuery的js文件 --> <script type="text/javascript" src="" ></script> <!-- 引入jQuery UI的js文件 --> <script type="text/javascript" src="" ></script> </head> <body> <label for="language">请输入指定的语言：</lable> <input id="language" name="language" type="text"> </body> </html>现在，我们就来编写js代码让language输入框实现自动完成功能。要实现自动完成功能，我们需要如下调用jQuery UI扩展的autocomplete()方法：
$("#language").autocomplete(optionsObj);这里的optionsObj是一个用于配置autocomplete相关参数选项的JavaScript对象。我们可以参考Autocomplete官方文档的相关说明来设置该对象。
Autocomplete有一个非常重要的属性参数source，它表示用于自动完成功能的数据集合。source属性的值可以是一个数组；也可以是一个字符串，用于表示一个远程请求的URL地址，通过处理该URL返回的数据从而获得autocomplete所需的数据；它还可以是一个回调函数，以便于完成一些复杂的数据处理。
现在，我们就使用最简单的方式，给source属性指定一个静态的数组，来初步实现自动完成功能。
$("#language").autocomplete({ source: [ "Chinese", "English", "Spanish", "Russian", "French", "Japanese", "Korean", "German" ] });此时，使用浏览器访问该html页面就会发现，我们已经完成的最基本的自动完成功能了。运行代码
使用autocomplete实现基本的自动完成功能
不过，有些时候我们希望列表显示的文本和实际输入的值并不一致。此时，我们为source指定多个对象的数组，每个对象必须包含label和value属性，label表示显示的文本，value表示实际输入的值(当然它也可以包括其他属性，你可以自行进行相关操作)。
$("#language").autocomplete({ // 静态的数据源，根据label属性进行显示或模糊匹配，当给输入框设置value属性值 source: [ { label: "Chinese", value: 1 }, { label: "English", value: 2 }, { label: "Spanish", value: 3 }, { label: "Russian", value: 4 }, { label: "French", value: 5 }, { label: "Japanese", value: 6 }, ] }); // 最上面由多个字符串组成的数组，会被视为label和value值相同、均为该字符串的对象更多的时候，我们希望该输入框显示的还是label属性值，但还要给另外的元素(例如隐藏文本域)设置value属性值，或者做一些其他处理。我们可以使用select事件来协助处理。
运行代码
相关文章
精彩导读
热门资讯
关注我们
