《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.2　技巧：使用自动补全微件提示输入值

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章，第7.2节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看

7.2 技巧：使用自动补全微件提示输入值

在一些网站上，你可以找到用于选择的下拉菜单，它们包含了极长的选项列表。在许多情况下，可以使用具有自动补全功能的输入框取代下拉式菜单来帮助用户。省去了滚动选择，用户只要输入目标选项的第一个字符，然后自动补全组件便可以完成剩下的事。

代码清单7-2提供了一个自动补全的例子，它使用一段称为“Lorem Ipsum”的文字来实现输入第一个字后的补全。这段文字起源于两千年前，但仍然使用在图形设计和排版行业（通常被称为“假文”或“填充”的文字），用来查看设计的效果。

代码清单7-2 提示Lorem Ipsum值

00 !DOCTYPE html 

02 html lang="en" 

03 head 

04 title jQuery UI Draggable /title 

05 link type="text/css" rel="stylesheet" href=

06 "http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css" 

07 style 

08 .ui-widget {

09 font-size: 12px;

11 /style 

12 /head 

13 body 

15 div id="my-container" 

16 label for="my-autocomplete" Type to see how this works /label 

17 input type="text" id="my-autocomplete" 

18 /div 

20 script src="http://code.jquery.com/jquery-1.7.1.min.js" /script 

21 script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js" 

22 /script 

24 script 

25 // 请将下列代码移至一个外部的.js文件中

26 $(document).ready(function() {

28 var loremIpsum = [

29 Lorem, ipsum, dolor, sit, amet, consectetur,

30 adipiscing, elit, Donec, fermentum, tortor, et,

31 ante, ullamcorper, eget, posuere, ligula 

32 ];

34 $(#my-autocomplete).autocomplete({source: loremIpsum});

36 });

37 /script 

38 /body 

39 /html 

当运行这个例子时，要注意自动补全框中的提示是根据它们在第29～31行的出现顺序排序的。autocomplete()函数在第34行被调用，它使用了source的选项，其值loremIpsum为第28行创建的数组。如果需要一个不同的排列顺序，按字母顺序或按热门程度，需要在“喂”给自动补全框数据前，自己先排好序。

7.2.1 为自动补全元素添加样式
在调用autocomplete命令后，输入框的HTML会变为这样：

 input type="text" id="my-autocomplete" autocomplete="off" role="textbox" aria-autocomplete="list"

 aria-haspopup="true" 

当开始在自动补全框中输入时，一组临时的HTML元素被添加到文档底部以生成选项列表。

 role="listbox" aria-activedescendant="ui-active-menuitem"

 li role="menuitem" 

 a tabindex="-1" Lorem /a 

 /li 

 li role="menuitem" 

 a tabindex="-1" dolor /a 

 /li 

 . . . 等等 . . .

 /ul 

可以使用这些HTML代码片段中的类名去手动修改自动补全组件的样式。

7.2.2 设置自动补全的选项
表7-3列出的选项可以设置自动补全微件。

7.2.3 捕获自动补全的事件
当使用自动补全时，有很多阶段可以发生事件处理。下面的代码片段举例演示了哪个阶段可以绑定它。

一个新的自动补全组件被初始化时：

$(#my-autocomplete).autocomplete({create: function(event, ui) {

 // 事件处理

$(#my-autocomplete)

 .on(autocompletecreate, function(event, ui) {

 // 事件处理

 .autocomplete();

用户输入的搜索值达到minLength设置的长度时。返回false将取消搜索：

$(#my-autocomplete).autocomplete({search: function(event, ui) {

 // 事件处理

$(#my-autocomplete).autocomplete()

 .on(autocompletesearch, function(event, ui) {

 // 事件处理

选项菜单打开时：

$(#my-autocomplete).autocomplete({open: function(event, ui) {

 // 事件处理

$(#my-autocomplete).autocomplete()

 .on(autocompleteopen, function(event, ui) {

 // 事件处理

下拉菜单中的一个元素获得焦点时。返回false将阻止输入框的更新：

$(#my-autocomplete).autocomplete({focus: function(event, ui) {

 // 事件处理

$(#my-autocomplete).autocomplete()

 .on(autocompletefocus, function(event, ui) {

 // 事件处理

一个选项被选择时：

$(#my-autocomplete).autocomplete({select: function(event, 

ui) {

 // 事件处理

$(#my-autocomplete).autocomplete()

 .on(autocompleteselect, function(event, ui) {

 // 事件处理

自动补全关闭时：

$(#my-autocomplete).autocomplete({close: function(event, ui) {

 // 事件处理

$(#my-autocomplete).autocomplete()

 .on(autocompleteclose, function(event, ui) {

 // 事件处理

当用户移动到屏幕上的下一个元素，如果输入框的值也发生了变化，该事件被触发：

$(#my-autocomplete).autocomplete({change: function(event, ui) {

 // 事件处理

$(#my-autocomplete).autocomplete()

 .on(autocompletechange, function(event, ui) {

 // 事件处理

7.2.4 调用自动补全的方法
下面的代码片段演示了使用自动补全的方法的例子。

绑定click事件，设置选项minLength:0，点击输入框后，不输入任何值而使用当前值则会显示所有搜索的结果1：

$(#my-autocomplete)

 .autocomplete({minLength: 0, source: loremIpsum})

 .click(function() {

 $(this).autocomplete(search);

关闭当前提示列表：

$(#my-autocomplete).autocomplete(close);

【前端】使用jQuery封装一套UI组件 - 级联选择器组件 本篇文章来讲解下级联选择器组件 级联选择器，在实际项目中也是比较常用的组件，比如：省市区三级关联，上下级联动等 最后面会附上全部代码
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件 本篇文章来讲解下是和否的滑动切换组件 切换滑动组件，使用的场景实际上就是一个开和关的场景，一般有是和否，开和关，禁用和启用等等，只需要设置0和1即可
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件 【首先要声明一点，技术不分好坏，能用好就行，不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始，看到比较新颖的移动端时间选择组件是在某款手机上，分年月日下拉选择，UI界面也挺好看的 除了讲解实现的步骤以及关键点，文章最后面会有完整的代码
【前端】使用jQuery封装一套UI组件 - 单选框 目前前端技术发展非常快，各大厂都开源和分享了自家的前端框架，非常多成熟的UI组件供大家选择，很实用也很方便，给开发上节省了不少时间成本，当然少不了学习成本，不过也不会占用太多时间，只要有前端基础的话，原理基本都是通用的，只是写法不一样。 因此，除了学习现有的优秀前端之外，最好能自己根据原理封装一套自己的UI组件，目的是为了更好的理解前端知识点以及锻炼编程逻辑
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。