自动完成（Autocomplete）

优质

小牛编辑

139浏览

2023-12-01

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

JQueryUI提供了一个自动完成窗口小部件 - 一个与下拉列表非常相似的控件，但过滤选项只显示与用户在控件中键入的内容相匹配的选项。 jQueryUI提供了autocomplete()方法，用于在输入字段下创建一个建议列表，并向相关元素添加新的CSS类，以便为它们提供合适的样式。

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

语法 (Syntax)

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

$（selector，context）.autocomplete（options）方法
$(selector, context).autocomplete ("action", params)方法

$（selector，context）.autocomplete（options）方法

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

语法 (Syntax)

$(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" ] });

Sr.No.	选项和说明
1	appendTo 此选项用于向菜单追加元素。默认情况下，其值为null 。 Option - appendTo 此选项用于向菜单追加元素。默认情况下，其值为null 。当值为null时，将检查输入字段的父级是否为ui-front类。如果找到具有ui-front类的元素，则菜单将附加到该元素。 Syntax `$( ".selector" ).autocomplete({ appendTo: "#identifier" });`
2	autoFocus 此选项设置为true ，菜单的第一项将在显示菜单时自动聚焦。默认情况下，其值为false 。 Option - autoFocus 此选项设置为true ，菜单的第一项将在显示菜单时自动聚焦。默认情况下，其值为false 。 Syntax `$( ".selector" ).autocomplete({ autoFocus: true });`
3	delay 此选项是一个Integer，表示在尝试获取匹配值（由source选项指定）之前等待的毫秒数。通过在启动搜索之前为用户提供输入更多字符的时间，这可以帮助减少在获取非本地数据时的颠簸。默认情况下，其值为300 。 Option - delay 此选项是一个Integer，表示在尝试获取匹配值（由source选项指定）之前等待的毫秒数。通过在启动搜索之前为用户提供输入更多字符的时间，这可以帮助减少在获取非本地数据时的颠簸。默认情况下，其值为300 。 Syntax `$( ".selector" ).autocomplete({ delay: 500 });`
4	disabled 如果指定此选项且为true ，则最初禁用自动完成窗口小部件。默认情况下，其值为false 。 Option - disabled 如果指定此选项且为true ，则最初禁用自动完成窗口小部件。默认情况下，其值为false 。 Syntax `$( ".selector" ).autocomplete({ disabled: true });`
5	minLength 在尝试获取匹配值之前必须输入的字符数（由source选项指定）。当少数字符不足以将设置降低到合理水平时，这可以防止显示过大的值集。默认情况下，其值为1 。 Option - minLength 在尝试获取匹配值之前必须输入的字符数（由source选项指定）。当少数字符不足以将设置降低到合理水平时，这可以防止显示过大的值集。默认情况下，其值为1 。 Syntax `$( ".selector" ).autocomplete({ minLength: 0 });`
6	position 此选项标识建议菜单相对于关联输入元素的位置。选项默认为input元素，但您可以指定另一个要定位的元素。默认情况下，其值为{ my: "left top", at: "left bottom", collision: "none" } 。 Option - position 此选项标识建议菜单相对于关联输入元素的位置。选项默认为input元素，但您可以指定另一个要定位的元素。默认情况下，其值为{ my: "left top", at: "left bottom", collision: "none" } 。 Syntax `$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });`
7	source 此选项指定获取与输入数据匹配的数据的方式。必须提供值，否则将不会创建自动完成窗口小部件。默认情况下，其值为none; must be specified none; must be specified 。 Option - source 此选项指定获取与输入数据匹配的数据的方式。必须提供值，否则将不会创建自动完成窗口小部件。该值可以是: 表示将返回匹配数据的服务器资源的URL的String ，从中匹配值的本地数据an array ，或 a function ，用作提供匹配值的一般回调。 Syntax `$( ".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.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/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

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/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和延迟

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/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>

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

使用标签

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/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>

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

使用外部来源

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/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 );
?>

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

扩展点

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

Sr.No.	方法和描述
1	_renderItem（ul，item）此方法控制窗口小部件菜单中每个选项的创建。此方法创建一个新的元素，将其附加到菜单并返回它。 _renderItem( ul, item ) 此方法控制窗口小部件菜单中每个选项的创建。此方法创建一个新的元素，将其附加到菜单并返回它。哪里 - 《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可用。此方法不接受任何参数。

Sr.No.

方法和描述

_renderItem（ul，item）

此方法控制窗口小部件菜单中每个选项的创建。此方法创建一个新的

元素，将其附加到菜单并返回它。

_renderItem( ul, item )

此方法控制窗口小部件菜单中每个选项的创建。此方法创建一个新的

元素，将其附加到菜单并返回它。

哪里 -

《ul》是必须附加到新创建的“li”元素的元素。
item
可以是label(String) ，要为项目显示的字符串，或value(String) ，即在选择项目时插入到输入中的值。

_renderMenu（ul，items）

此方法控制构建窗口小部件的菜单。

_renderMenu( ul, items )

此方法控制构建窗口小部件的菜单。哪里 -

《ul》是与用户键入的术语匹配的项目数组。每个项目都是具有label和value属性的对象。

_resizeMenu()

此方法在显示菜单之前控制菜单的大小。菜单元素在this.menu.element可用。此方法不接受任何参数。

_resizeMenu()

此方法在显示菜单之前控制菜单的大小。菜单元素在this.menu.element可用。此方法不接受任何参数。

自动完成元素的事件管理

除了我们在前面几节中看到的自动完成（选项）方法之外，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 ) {}
});

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

例子 (Example)

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/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>

让我们将上述代码保存在HTML文件autocompleteexample.htm ，并在支持javascript的标准浏览器中打开它。