本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章，第7.2节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
在一些网站上，你可以找到用于选择的下拉菜单，它们包含了极长的选项列表。在许多情况下，可以使用具有自动补全功能的输入框取代下拉式菜单来帮助用户。省去了滚动选择，用户只要输入目标选项的第一个字符，然后自动补全组件便可以完成剩下的事。
代码清单7-2提供了一个自动补全的例子，它使用一段称为“Lorem Ipsum”的文字来实现输入第一个字后的补全。这段文字起源于两千年前，但仍然使用在图形设计和排版行业（通常被称为“假文”或“填充”的文字），用来查看设计的效果。
代码清单7-2 提示Lorem Ipsum值
00 <!DOCTYPE html> 01 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; 10 } 11 </style> 12 </head> 13 <body> 14 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> 19 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> 23 24 <script> 25 // 请将下列代码移至一个外部的.js文件中 26 $(document).ready(function() { 27 28 var loremIpsum = [ 29 'Lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 30 'adipiscing', 'elit', 'Donec', 'fermentum', 'tortor', 'et', 31 'ante', 'ullamcorper', 'eget', 'posuere', 'ligula' 32 ]; 33 34 $('#my-autocomplete').autocomplete({source: loremIpsum}); 35 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" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> 当开始在自动补全框中输入时，一组临时的HTML元素被添加到文档底部以生成选项列表。 <ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; width: 149px; top: 32px; left: 181px; display: none;"> <li class="ui-menu-item" role="menuitem"> <a class="ui-corner-all" tabindex="-1">Lorem</a> </li> <li class="ui-menu-item" role="menuitem"> <a class="ui-corner-all" 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');
相关资源：敏捷开发V1.0.pptx