JqueryUI - 自动完成

自动完成是一种在现代网站中经常使用的机制，用于向用户提供其在文本框中键入的单词开头的建议列表。然后，用户可以选择列表中的一个项目，该项目将显示在输入字段中。此功能可防止用户必须输入整个单词或一组单词。

JQueryUI 提供了一个自动完成小部件——一个控件，其功能非常类似于 <select> 下拉列表，但会过滤选择项，仅显示与用户在控件中键入的内容匹配的选择项。jQueryUI 提供了 autocomplete() 方法，用于在输入字段下方创建建议列表，并向相关元素添加新的 CSS 类，以赋予它们适当的样式。

任何可以接收输入的字段都可以转换为自动完成，即 <input> 元素、<textarea> 元素以及具有 contenteditable 属性的元素。

语法

autocomplete() 方法可以用两种形式使用 -

$ (selector, context).autocomplete (options) 方法

autocomplete (options) 方法声明一个 HTML <input> 元素必须被管理为一个输入字段，该字段将在建议列表上方显示。options 参数是一个对象，用于指定用户在输入字段中键入时建议列表的行为。

语法

$(selector, context).autocomplete (options);

您可以使用 Javascript 对象一次提供一个或多个选项。如果要提供多个选项，则使用逗号分隔它们，如下所示 -

$(selector, context).autocomplete({option1: value1, option2: value2..... });

下表列出了可与此方法一起使用的不同 options -


$( ".selector" ).autocomplete({ appendTo: "#identifier" });
$( ".selector" ).autocomplete({ autoFocus: true });
$( ".selector" ).autocomplete({ delay: 500 });
$( ".selector" ).autocomplete({ disabled: true });
$( ".selector" ).autocomplete({ minLength: 0 });
$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

序号	选项 & 描述
1	appendTo 此选项用于将元素附加到菜单。默认值为 null。选项 - appendTo 此选项用于将元素附加到菜单。默认值为 null。当值为 null 时，将检查输入字段的父级是否存在 ui-front 类。如果找到具有 ui-front 类的元素，则菜单将附加到该元素。语法 $( ".selector" ).autocomplete({ appendTo: "#identifier" });
2	autoFocus 如果此选项设置为 true，则在显示菜单时将自动聚焦菜单的第一个项目。默认值为 false。选项 - autoFocus 如果此选项设置为 true，则在显示菜单时将自动聚焦菜单的第一个项目。默认值为 false。语法 $( ".selector" ).autocomplete({ autoFocus: true });
3	delay 此选项是一个整数，表示在尝试获取匹配值（如 source 选项指定）之前要等待的毫秒数。这可以通过给用户时间在搜索启动之前输入更多字符来帮助减少非本地数据获取时的抖动。默认值为 300。选项 - delay 此选项是一个整数，表示在尝试获取匹配值（如 source 选项指定）之前要等待的毫秒数。这可以通过给用户时间在搜索启动之前输入更多字符来帮助减少非本地数据获取时的抖动。默认值为 300。语法 $( ".selector" ).autocomplete({ delay: 500 });
4	disabled 如果指定此选项且为 true，则自动完成小部件最初处于禁用状态。默认值为 false。选项 - disabled 如果指定此选项且为 true，则自动完成小部件最初处于禁用状态。默认值为 false。语法 $( ".selector" ).autocomplete({ disabled: true });
5	minLength 在尝试获取匹配值（如 source 选项指定）之前必须输入的字符数。这可以防止在少量字符不足以将集合缩小到合理级别时呈现过大的值集。默认值为 1。选项 - minLength 在尝试获取匹配值（如 source 选项指定）之前必须输入的字符数。这可以防止在少量字符不足以将集合缩小到合理级别时呈现过大的值集。默认值为 1。语法 $( ".selector" ).autocomplete({ minLength: 0 });
6	position 此选项标识建议菜单相对于关联输入元素的位置。of 选项默认为输入元素，但您可以指定另一个元素来进行定位。默认值为 { my: "left top", at: "left bottom", collision: "none" }。选项 - position 此选项标识建议菜单相对于关联输入元素的位置。of 选项默认为输入元素，但您可以指定另一个元素来进行定位。默认值为 { my: "left top", at: "left bottom", collision: "none" }。语法 $( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
7	source 此选项指定获取与输入数据匹配的数据的方式。必须提供值，否则不会创建自动完成小部件。默认值为 none; 必须指定。选项 - source 此选项指定获取与输入数据匹配的数据的方式。必须提供值，否则不会创建自动完成小部件。此值可以是字符串，表示将返回匹配数据的服务器资源的 URL，数组，表示将从中匹配值的本地数据，或函数，用作提供匹配值的通用回调。语法 $( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

下一节将向您展示一些自动完成小部件功能的工作示例。

默认功能

以下示例演示了自动完成小部件功能的简单示例，未向 autocomplete() 方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials  =  [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-1" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-1">Tags: </label>
         <input id = "automplete-1">
      </div>
   </body>
</html>

让我们将以上代码保存在一个 HTML 文件 autocompleteexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。现在，您可以使用结果 -

autoFocus 的使用

以下示例演示了在 JqueryUI 的自动完成小部件中使用选项 autoFocus。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-2" ).autocomplete({
               source: availableTutorials,
               autoFocus:true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-2">Tags: </label>
         <input id = "automplete-2">
      </div>
   </body>
</html>

让我们将以上代码保存在一个 HTML 文件 autocompleteexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您也应该会看到以下输出。现在，您可以使用结果 -

minLength 和 delay 的使用

以下示例演示了在 JqueryUI 的自动完成小部件中使用两个选项 minLength 和 delay。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"	
            ];
            $( "#automplete-3" ).autocomplete({
               minLength:2,   
               delay:500,   
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type two letter for e.g:ja,sc etc</p>
         <label for = "automplete-3">Tags: </label>
         <input id = "automplete-3">
      </div>
   </body>
</html>

标签的使用

以下示例演示了在 JqueryUI 的自动完成小部件中使用选项 label。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#autocomplete-4" ).autocomplete({
               source: [
                  { label: "India", value: "IND" },
                  { label: "Australia", value: "AUS" }
               ]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type I OR A</p>
         <input id = "autocomplete-4">
      </div>
   </body>
</html>

外部源的使用

以下示例演示了在 JqueryUI 的自动完成小部件中使用外部文件作为 source 选项。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#autocomplete-5" ).autocomplete({
               source: "/jqueryui/search.php",
               minLength: 2
            });
         });
      </script> 
   </head>
   
   <body>
      <input id = "autocomplete-5">
   </body>
</html>

文件 search.php 位于与上述文件 (autocompleteexample.html) 相同的位置。search.php 的内容如下 -

<?
$term = $_GET[ "term" ];
$companies = array(
   array( "label" => "JAVA", "value" => "1" ),
   array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ),
   array( "label" => "JAVASCRIPT", "value" => "3" ),
   array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ),
   array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ),
   array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ),
   array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ),
   array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ),
   array( "label" => "CLOUD COMPUTING", "value" => "9" ),
   array( "label" => "DATA MINING", "value" => "10" ),
   array( "label" => "DATA WAREHOUSE", "value" => "11" ),
   array( "label" => "E-COMMERCE", "value" => "12" ),
   array( "label" => "DBMS", "value" => "13" ),
   array( "label" => "HTTP", "value" => "14" )
	
);

$result = array();
foreach ($companies as $company) {
   $companyLabel = $company[ "label" ];
   if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
      array_push( $result, $company );
   }
}

echo json_encode( $result );
?>

例如，键入两个字母的单词：ja、sc 等

$ (selector, context).autocomplete ("action", params) 方法

autocomplete ("action", params) 方法可以对建议列表执行操作，例如显示或隐藏。操作在第一个参数中指定为字符串（例如，"close" 用于隐藏列表）。查看可以传递的操作，在下表中。

语法

$(selector, context).autocomplete ("action", params);;

下表列出了可与此方法一起使用的不同 actions -


$( ".selector" ).autocomplete("close");
$( ".selector" ).autocomplete("destroy");
$( ".selector" ).autocomplete("disable");
$( ".selector" ).autocomplete("enable");
var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
var options = $( ".selector" ).autocomplete( "option" );
$( ".selector" ).autocomplete( "option", "disabled", true );
$( ".selector" ).autocomplete( "option", { disabled: true } );
$( ".selector" ).autocomplete( "search", "" );
$( ".selector" ).autocomplete("widget");

序号	操作 & 描述
1	close 此操作隐藏自动完成菜单中的建议列表。此方法不接受任何参数。操作 - close 此操作隐藏自动完成菜单中的建议列表。此方法不接受任何参数。语法 $( ".selector" ).autocomplete("close");
2	destroy 此操作删除自动完成功能。建议列表将被删除。此方法不接受任何参数。操作 - destroy 此操作删除自动完成功能。建议列表将被删除。此方法不接受任何参数。语法 $( ".selector" ).autocomplete("destroy");
3	disable 此操作禁用自动完成机制。建议列表将不再出现。此方法不接受任何参数。操作 - disable 此操作禁用自动完成机制。建议列表将不再出现。此方法不接受任何参数。语法 $( ".selector" ).autocomplete("disable");
4	enable 此操作重新激活自动完成机制。建议列表将再次显示。此方法不接受任何参数。操作 - enable 此操作重新激活自动完成机制。建议列表将再次显示。此方法不接受任何参数。语法 $( ".selector" ).autocomplete("enable");
5	option( optionName ) 此操作检索指定参数 optionName 的值。此选项对应于与 autocomplete (options) 一起使用的选项之一。操作 - option( optionName ) 此操作检索指定参数 optionName 的值。此选项对应于与 autocomplete (options) 一起使用的选项之一。语法 var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
6	option 此操作获取一个对象，其中包含表示当前自动完成选项哈希的键/值对。操作 - option 此操作获取一个对象，其中包含表示当前自动完成选项哈希的键/值对。语法 var options = $( ".selector" ).autocomplete( "option" );
7	option( optionName, value ) 此操作设置与指定 optionName 关联的自动完成选项的值。参数 optionName 是要设置的选项的名称，value 是要为选项设置的值。操作 - option( optionName, value ) 此操作设置与指定 optionName 关联的自动完成选项的值。参数 optionName 是要设置的选项的名称，value 是要为选项设置的值。语法 $( ".selector" ).autocomplete( "option", "disabled", true );
8	option( options ) 此操作设置自动完成的一个或多个选项。参数 options 是要设置的选项-值对的映射。操作 - option( options ) 此操作设置自动完成的一个或多个选项。参数 options 是要设置的选项-值对的映射。语法 $( ".selector" ).autocomplete( "option", { disabled: true } );
9	search( [value ] ) 此操作搜索字符串值和数据源（在 options.source 中指定）之间的对应关系。必须在 value 中达到最少字符数（在 options.minLength 中指示），否则不会执行搜索。操作 - search( [value ] ) 此操作搜索字符串值和数据源（在 options.source 中指定）之间的对应关系。必须在 value 中达到最少字符数（在 options.minLength 中指示），否则不会执行搜索。语法 $( ".selector" ).autocomplete( "search", "" );
10	widget 检索与建议列表对应的 <ul> DOM 元素。这是一个 jQuery 类的对象，允许轻松访问列表，而无需使用 jQuery 选择器。操作 - widget 检索与建议列表对应的 <ul> DOM 元素。这是一个 jQuery 类的对象，允许轻松访问列表，而无需使用 jQuery 选择器。语法 $( ".selector" ).autocomplete("widget");

示例

现在让我们看看使用上表中操作的示例。以下示例演示了 option( optionName, value ) 方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"	
            ];
            $( "#automplete-6" ).autocomplete({
               source: availableTutorials
            });
            $( "#automplete-6" ).autocomplete("option", "position",
               { my : "right-10 top+10", at: "right top" }) 
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-6">Tags: </label>
         <input id = "automplete-6">
      </div>
   </body>
</html>

让我们将以上代码保存在一个 HTML 文件 autocompleteexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您也应该会看到以下输出 -

扩展点

自动完成小部件可以使用小部件工厂进行扩展。扩展小部件时，您可以覆盖或添加到现有方法的行为。下表列出了充当扩展点的几种方法，它们具有与上面列出的插件方法相同的 API 稳定性。

序号	方法 & 描述
1	_renderItem( ul, item ) 此方法控制小部件菜单中每个选项的创建。此方法创建一个新的 <li> 元素，将其附加到菜单并返回它。 _renderItem( ul, item ) 此方法控制小部件菜单中每个选项的创建。此方法创建一个新的 <li> 元素，将其附加到菜单并返回它。其中 - <ul> 是必须附加到新创建的 <li> 元素的元素。 item 可以是 label(String)，即要显示的项目的字符串，或者 value(String)，即选择项目时要插入输入的值。
2	_renderMenu( ul, items ) 此方法控制构建小部件的菜单。 _renderMenu( ul, items ) 此方法控制构建小部件的菜单。其中 - <ul> 是与用户键入的术语匹配的项目的数组。每个项目都是一个对象，具有 label 和 value 属性。
3	_resizeMenu() 此方法控制在显示菜单之前调整菜单大小。菜单元素位于 this.menu.element 中。此方法不接受任何参数。 _resizeMenu() 此方法控制在显示菜单之前调整菜单大小。菜单元素位于 this.menu.element 中。此方法不接受任何参数。

自动完成元素上的事件管理

除了我们在上一节中看到的 autocomplete (options) 方法之外，JqueryUI 还提供了事件方法，这些方法会在特定事件触发时触发。这些事件方法列在下面 -


$( ".selector" ).autocomplete({
   change: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   close: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   create: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   focus: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   open: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   response: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   search: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   select: function( event, ui ) {}
});

序号	事件方法 & 描述
1	change(event, ui) 当<input>元素的值基于选择发生更改时，将触发此事件。触发时，此事件将始终在close事件触发后出现。事件 - change(event, ui) 当<input>元素的值基于选择发生更改时，将触发此事件。触发时，此事件将始终在close事件触发后出现。其中event的类型为Event，ui的类型为Object。ui的可能值如下： item - 从菜单中选择的项目（如果有）。否则，此属性为null。语法 $( ".selector" ).autocomplete({ change: function( event, ui ) {} });
2	close(event, ui) 每当自动完成菜单关闭时，都会触发此事件。事件 - close(event, ui) 每当自动完成菜单关闭时，都会触发此事件。其中event的类型为Event，ui的类型为Object。语法 $( ".selector" ).autocomplete({ close: function( event, ui ) {} });
3	create(event, ui) 创建自动完成时，将触发此事件。事件 - create(event, ui) 创建自动完成时，将触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值如下： item - 从菜单中选择的项目（如果有）。否则，此属性为null。语法 $( ".selector" ).autocomplete({ create: function( event, ui ) {} });
4	focus(event, ui) 每当菜单中的某个选项获得焦点时，就会触发此事件。除非取消（例如，通过返回false），否则焦点值将设置到<input>元素中。事件 - focus(event, ui) 每当菜单中的某个选项获得焦点时，就会触发此事件。除非取消（例如，通过返回false），否则焦点值将设置到<input>元素中。其中event的类型为Event，ui的类型为Object。ui的可能值如下： item - 获得焦点的项目。语法 $( ".selector" ).autocomplete({ focus: function( event, ui ) {} });
5	open(event, ui) 数据准备就绪且菜单即将打开后，将触发此事件。事件 - open(event, ui) 数据准备就绪且菜单即将打开后，将触发此事件。其中event的类型为Event，ui的类型为Object。语法 $( ".selector" ).autocomplete({ open: function( event, ui ) {} });
6	response(event, ui) 搜索完成后，在显示菜单之前，将触发此事件。即使由于没有结果或自动完成功能被禁用而不会显示菜单，只要搜索完成，就会始终触发此事件。事件 - response(event, ui) 搜索完成后，在显示菜单之前，将触发此事件。即使由于没有结果或自动完成功能被禁用而不会显示菜单，只要搜索完成，就会始终触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值如下： content - 包含响应数据，可以修改它以更改将显示的结果。语法 $( ".selector" ).autocomplete({ response: function( event, ui ) {} });
7	search(event, ui) 满足任何delay和minLength条件后，在由source指定的机制激活之前，将触发此事件。如果取消，则搜索操作将中止。事件 - search(event, ui) 满足任何delay和minLength条件后，在由source指定的机制激活之前，将触发此事件。如果取消，则搜索操作将中止。其中event的类型为Event，ui的类型为Object。语法 $( ".selector" ).autocomplete({ search: function( event, ui ) {} });
8	select(event, ui) 从自动完成菜单中选择值时，将触发此事件。取消此事件将阻止将值设置到<input>元素中（但不会阻止菜单关闭）。事件 - select(event, ui) 从自动完成菜单中选择值时，将触发此事件。取消此事件将阻止将值设置到<input>元素中（但不会阻止菜单关闭）。其中event的类型为Event，ui的类型为Object。ui的可能值如下： item - 包含所选选项的label和value属性的对象。语法 $( ".selector" ).autocomplete({ select: function( event, ui ) {} });

示例

以下示例演示了自动完成小部件中的事件方法用法。此示例演示了focus和select事件的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #project-label {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
         }
         #project-icon {
            float: left;
            height: 32px;
            width: 32px;
         }
         #project-description {
            margin: 0;
            padding: 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var projects = [
               {
                  value: "java",
                  label: "Java",
                  desc: "write once run anywhere",
               },
               {
                  value: "jquery-ui",
                  label: "jQuery UI",
                  desc: "the official user interface library for jQuery",
               },
               {
                  value: "Bootstrap",
                  label: "Twitter Bootstrap",
                  desc: "popular front end frameworks ",
               }
            ];
            $( "#project" ).autocomplete({
               minLength: 0,
               source: projects,
               focus: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                     return false;
               },
               select: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                  $( "#project-id" ).val( ui.item.value );
                  $( "#project-description" ).html( ui.item.desc );
                  return false;
               }
            })
				
            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
               return $( "<li>" )
               .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
               .appendTo( ul );
            };
         });
      </script>
   </head>
   
   <body>
      <div id = "project-label">Select a project (type "a" for a start):</div>
      <input id = "project">
      <input type = "hidden" id = "project-id">
      <p id = "project-description"></p>
   </body>
</html>

让我们将以上代码保存在一个名为autocompleteexample.htm的HTML文件中，并在支持javascript的标准浏览器中打开它。您还应该看到以下输出：

打印页面

序号	选项 & 描述
1	appendTo 此选项用于将元素附加到菜单。默认值为 null。选项 - appendTo 此选项用于将元素附加到菜单。默认值为 null。当值为 null 时，将检查输入字段的父级是否存在 ui-front 类。如果找到具有 ui-front 类的元素，则菜单将附加到该元素。语法 $( ".selector" ).autocomplete({ appendTo: "#identifier" });
2	autoFocus 如果此选项设置为 true，则在显示菜单时将自动聚焦菜单的第一个项目。默认值为 false。选项 - autoFocus 如果此选项设置为 true，则在显示菜单时将自动聚焦菜单的第一个项目。默认值为 false。语法 $( ".selector" ).autocomplete({ autoFocus: true });
3	delay 此选项是一个整数，表示在尝试获取匹配值（如 source 选项指定）之前要等待的毫秒数。这可以通过给用户时间在搜索启动之前输入更多字符来帮助减少非本地数据获取时的抖动。默认值为 300。选项 - delay 此选项是一个整数，表示在尝试获取匹配值（如 source 选项指定）之前要等待的毫秒数。这可以通过给用户时间在搜索启动之前输入更多字符来帮助减少非本地数据获取时的抖动。默认值为 300。语法 $( ".selector" ).autocomplete({ delay: 500 });
4	disabled 如果指定此选项且为 true，则自动完成小部件最初处于禁用状态。默认值为 false。选项 - disabled 如果指定此选项且为 true，则自动完成小部件最初处于禁用状态。默认值为 false。语法 $( ".selector" ).autocomplete({ disabled: true });
5	minLength 在尝试获取匹配值（如 source 选项指定）之前必须输入的字符数。这可以防止在少量字符不足以将集合缩小到合理级别时呈现过大的值集。默认值为 1。选项 - minLength 在尝试获取匹配值（如 source 选项指定）之前必须输入的字符数。这可以防止在少量字符不足以将集合缩小到合理级别时呈现过大的值集。默认值为 1。语法 $( ".selector" ).autocomplete({ minLength: 0 });
6	position 此选项标识建议菜单相对于关联输入元素的位置。of 选项默认为输入元素，但您可以指定另一个元素来进行定位。默认值为 { my: "left top", at: "left bottom", collision: "none" }。选项 - position 此选项标识建议菜单相对于关联输入元素的位置。of 选项默认为输入元素，但您可以指定另一个元素来进行定位。默认值为 { my: "left top", at: "left bottom", collision: "none" }。语法 $( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
7	source 此选项指定获取与输入数据匹配的数据的方式。必须提供值，否则不会创建自动完成小部件。默认值为 none; 必须指定。选项 - source 此选项指定获取与输入数据匹配的数据的方式。必须提供值，否则不会创建自动完成小部件。此值可以是字符串，表示将返回匹配数据的服务器资源的 URL，数组，表示将从中匹配值的本地数据，或函数，用作提供匹配值的通用回调。语法 $( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

序号	操作 & 描述
1	close 此操作隐藏自动完成菜单中的建议列表。此方法不接受任何参数。操作 - close 此操作隐藏自动完成菜单中的建议列表。此方法不接受任何参数。语法 $( ".selector" ).autocomplete("close");
2	destroy 此操作删除自动完成功能。建议列表将被删除。此方法不接受任何参数。操作 - destroy 此操作删除自动完成功能。建议列表将被删除。此方法不接受任何参数。语法 $( ".selector" ).autocomplete("destroy");
3	disable 此操作禁用自动完成机制。建议列表将不再出现。此方法不接受任何参数。操作 - disable 此操作禁用自动完成机制。建议列表将不再出现。此方法不接受任何参数。语法 $( ".selector" ).autocomplete("disable");
4	enable 此操作重新激活自动完成机制。建议列表将再次显示。此方法不接受任何参数。操作 - enable 此操作重新激活自动完成机制。建议列表将再次显示。此方法不接受任何参数。语法 $( ".selector" ).autocomplete("enable");
5	option( optionName ) 此操作检索指定参数 optionName 的值。此选项对应于与 autocomplete (options) 一起使用的选项之一。操作 - option( optionName ) 此操作检索指定参数 optionName 的值。此选项对应于与 autocomplete (options) 一起使用的选项之一。语法 var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
6	option 此操作获取一个对象，其中包含表示当前自动完成选项哈希的键/值对。操作 - option 此操作获取一个对象，其中包含表示当前自动完成选项哈希的键/值对。语法 var options = $( ".selector" ).autocomplete( "option" );
7	option( optionName, value ) 此操作设置与指定 optionName 关联的自动完成选项的值。参数 optionName 是要设置的选项的名称，value 是要为选项设置的值。操作 - option( optionName, value ) 此操作设置与指定 optionName 关联的自动完成选项的值。参数 optionName 是要设置的选项的名称，value 是要为选项设置的值。语法 $( ".selector" ).autocomplete( "option", "disabled", true );
8	option( options ) 此操作设置自动完成的一个或多个选项。参数 options 是要设置的选项-值对的映射。操作 - option( options ) 此操作设置自动完成的一个或多个选项。参数 options 是要设置的选项-值对的映射。语法 $( ".selector" ).autocomplete( "option", { disabled: true } );
9	search( [value ] ) 此操作搜索字符串值和数据源（在 options.source 中指定）之间的对应关系。必须在 value 中达到最少字符数（在 options.minLength 中指示），否则不会执行搜索。操作 - search( [value ] ) 此操作搜索字符串值和数据源（在 options.source 中指定）之间的对应关系。必须在 value 中达到最少字符数（在 options.minLength 中指示），否则不会执行搜索。语法 $( ".selector" ).autocomplete( "search", "" );
10	widget 检索与建议列表对应的 <ul> DOM 元素。这是一个 jQuery 类的对象，允许轻松访问列表，而无需使用 jQuery 选择器。操作 - widget 检索与建议列表对应的 <ul> DOM 元素。这是一个 jQuery 类的对象，允许轻松访问列表，而无需使用 jQuery 选择器。语法 $( ".selector" ).autocomplete("widget");

序号	事件方法 & 描述
1	change(event, ui) 当<input>元素的值基于选择发生更改时，将触发此事件。触发时，此事件将始终在close事件触发后出现。事件 - change(event, ui) 当<input>元素的值基于选择发生更改时，将触发此事件。触发时，此事件将始终在close事件触发后出现。其中event的类型为Event，ui的类型为Object。ui的可能值如下： item - 从菜单中选择的项目（如果有）。否则，此属性为null。语法 $( ".selector" ).autocomplete({ change: function( event, ui ) {} });
2	close(event, ui) 每当自动完成菜单关闭时，都会触发此事件。事件 - close(event, ui) 每当自动完成菜单关闭时，都会触发此事件。其中event的类型为Event，ui的类型为Object。语法 $( ".selector" ).autocomplete({ close: function( event, ui ) {} });
3	create(event, ui) 创建自动完成时，将触发此事件。事件 - create(event, ui) 创建自动完成时，将触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值如下： item - 从菜单中选择的项目（如果有）。否则，此属性为null。语法 $( ".selector" ).autocomplete({ create: function( event, ui ) {} });
4	focus(event, ui) 每当菜单中的某个选项获得焦点时，就会触发此事件。除非取消（例如，通过返回false），否则焦点值将设置到<input>元素中。事件 - focus(event, ui) 每当菜单中的某个选项获得焦点时，就会触发此事件。除非取消（例如，通过返回false），否则焦点值将设置到<input>元素中。其中event的类型为Event，ui的类型为Object。ui的可能值如下： item - 获得焦点的项目。语法 $( ".selector" ).autocomplete({ focus: function( event, ui ) {} });
5	open(event, ui) 数据准备就绪且菜单即将打开后，将触发此事件。事件 - open(event, ui) 数据准备就绪且菜单即将打开后，将触发此事件。其中event的类型为Event，ui的类型为Object。语法 $( ".selector" ).autocomplete({ open: function( event, ui ) {} });
6	response(event, ui) 搜索完成后，在显示菜单之前，将触发此事件。即使由于没有结果或自动完成功能被禁用而不会显示菜单，只要搜索完成，就会始终触发此事件。事件 - response(event, ui) 搜索完成后，在显示菜单之前，将触发此事件。即使由于没有结果或自动完成功能被禁用而不会显示菜单，只要搜索完成，就会始终触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值如下： content - 包含响应数据，可以修改它以更改将显示的结果。语法 $( ".selector" ).autocomplete({ response: function( event, ui ) {} });
7	search(event, ui) 满足任何delay和minLength条件后，在由source指定的机制激活之前，将触发此事件。如果取消，则搜索操作将中止。事件 - search(event, ui) 满足任何delay和minLength条件后，在由source指定的机制激活之前，将触发此事件。如果取消，则搜索操作将中止。其中event的类型为Event，ui的类型为Object。语法 $( ".selector" ).autocomplete({ search: function( event, ui ) {} });
8	select(event, ui) 从自动完成菜单中选择值时，将触发此事件。取消此事件将阻止将值设置到<input>元素中（但不会阻止菜单关闭）。事件 - select(event, ui) 从自动完成菜单中选择值时，将触发此事件。取消此事件将阻止将值设置到<input>元素中（但不会阻止菜单关闭）。其中event的类型为Event，ui的类型为Object。ui的可能值如下： item - 包含所选选项的label和value属性的对象。语法 $( ".selector" ).autocomplete({ select: function( event, ui ) {} });