JqueryUI - 自动完成

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

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

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

句法

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

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

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

句法

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

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

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

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

先生。 选项和说明
1 附加到

此选项用于将元素附加到菜单。默认情况下它的值为null。

选项 - 追加到

此选项用于将元素附加到菜单。默认情况下它的值为null。当值为 null 时，将检查输入字段的父级是否有ui-front类。如果找到具有ui-front类的元素，菜单将附加到该元素。

句法

$( ".selector" ).autocomplete({ appendTo: "#identifier" });
2 自动对焦

当此选项设置为true时，菜单的第一项将在显示菜单时自动获得焦点。默认情况下它的值为false。

选项 - 自动对焦

当此选项设置为true时，菜单的第一项将在显示菜单时自动获得焦点。默认情况下它的值为false。

句法

$( ".selector" ).autocomplete({ autoFocus: true });
3 延迟

此选项是一个整数，表示在尝试获取匹配值（由source选项指定）之前要等待的毫秒数。通过在启动搜索之前给用户时间输入更多字符，这可以帮助减少获取非本地数据时的抖动。默认情况下，其值为300。

选项 - 延迟

此选项是一个整数，表示在尝试获取匹配值（由source选项指定）之前要等待的毫秒数。通过在启动搜索之前给用户时间输入更多字符，这可以帮助减少获取非本地数据时的抖动。默认情况下，其值为300。

句法

$( ".selector" ).autocomplete({ delay: 500 });
4 残疾人

如果指定此选项且为true，则自动完成小部件最初会被禁用。默认情况下它的值为false。

选项 - 禁用

如果指定此选项且为true，则自动完成小部件最初会被禁用。默认情况下它的值为false。

句法

$( ".selector" ).autocomplete({ disabled: true });
5 最小长度

在尝试获取匹配值之前必须输入的字符数（由源选项指定）。当几个字符不足以将值集削减到合理水平时，这可以防止显示太大的值集。默认情况下其值为1。

选项 - 最小长度

在尝试获取匹配值之前必须输入的字符数（由源选项指定）。当几个字符不足以将值集削减到合理水平时，这可以防止显示太大的值集。默认情况下其值为1。

句法

$( ".selector" ).autocomplete({ minLength: 0 });
6 位置

此选项标识建议菜单相对于关联输入元素的位置。of选项默认为输入元素，但您可以指定另一个元素来定位。默认情况下，其值为{ my: "left top", at: "left Bottom",collision: "none" }。

选项 - 位置

此选项标识建议菜单相对于关联输入元素的位置。of选项默认为输入元素，但您可以指定另一个元素来定位。默认情况下，其值为{ my: "left top", at: "left Bottom",collision: "none" }。

句法

$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
7 来源

该选项指定获取与输入数据匹配的数据的方式。必须提供一个值，否则将不会创建自动完成小部件。默认情况下它的值为none；必须指定。

选项-来源

该选项指定获取与输入数据匹配的数据的方式。必须提供一个值，否则将不会创建自动完成小部件。该值可以是：

  • String representing the URL of a server resource that will return matching data,

  • an array of local data from which the value will be matched,or

  • a function that serves as a general callback from providing the matching values.

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 的标准浏览器中打开它，您应该看到以下输出。现在，您可以使用结果 -

自动对焦的使用

以下示例演示了JqueryUI 自动完成小部件中选项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 自动完成小部件中选项标签的用法。

<!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 的自动完成小部件中使用外部文件作为源选项。

<!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 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

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

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

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

句法

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

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

先生。 动作与描述
1 关闭

此操作会隐藏“自动完成”菜单中的建议列表。此方法不接受任何参数。

Action - close

This action hides the list of suggestions in the Autocomplete menu. This method does not accept any arguments.

Syntax

$( ".selector" ).autocomplete("close");
2 破坏

此操作删除自动完成功能。建议列表已删除。此方法不接受任何参数。

Action - destroy

This action removes the autocomplete functionality. Lists of suggestions are deleted. This method does not accept any arguments.

Syntax

$( ".selector" ).autocomplete("destroy");
3 禁用

此操作会禁用自动完成机制。建议列表不再出现。此方法不接受任何参数。

Action - disable

This action disables the autocompletion mechanism. The list of suggestions no longer appears. This method does not accept any arguments.

Syntax

$( ".selector" ).autocomplete("disable");
4 使能够

此操作会重新激活自动完成机制。将再次显示建议列表。此方法不接受任何参数。

Action - enable

This action reactivates the autocompletion mechanism. The list of suggestions will again be displayed. This method does not accept any arguments.

Syntax

$( ".selector" ).autocomplete("enable");
5 选项（选项名称）

此操作检索指定参数optionName的值。此选项对应于与自动完成（选项）一起使用的选项之一。

Action - option( optionName )

This action retrieves the value of the specified param optionName. This option corresponds to one of those used with autocomplete (options).

Syntax

var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
6 选项

此操作获取一个对象，其中包含表示当前自动完成选项哈希的键/值对。

Action - option

This action gets an object containing key/value pairs representing the current autocomplete options hash.

Syntax

var options = $( ".selector" ).autocomplete( "option" );
7 选项（选项名称，值）

此操作设置与指定optionName关联的自动完成选项的值。参数optionName是要设置的选项的名称，value是要为该选项设置的值。

Action - option( optionName, value )

This action sets the value of the autocomplete option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.

Syntax

$( ".selector" ).autocomplete( "option", "disabled", true );
8 选项（选项）

此操作为自动完成设置一个或多个选项。参数options是要设置的选项值对的映射。

Action - option( options )

This action is sets one or more options for the autocomplete. The argument options is a map of option-value pairs to be set.

Syntax

$( ".selector" ).autocomplete( "option", { disabled: true } );
9 搜索（[值]）

此操作搜索字符串值和数据源（在options.source中指定）之间的对应关系。value 必须达到最小字符数（在options.minLength中指示），否则不会执行搜索。
10 小部件

检索与建议列表对应的 <ul> DOM 元素。这是 jQuery 类的一个对象，无需使用 jQuery 选择器即可轻松访问列表。

Action - widget

Retrieve the <ul> DOM element corresponding to the list of suggestions. This is an object of jQuery class that allows easy access to the list without using jQuery selectors.

Syntax

$( ".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.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-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 的标准浏览器中打开它，您还必须看到以下输出 -

扩展点

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

先生。 方法及说明
1 _renderItem( ul, 项目 )

此方法控制小部件菜单中每个选项的创建。此方法创建一个新的 <li> 元素，将其附加到菜单并返回它。

_renderItem( ul, item )

This method controls the creation of each option in the widget's menu. This method creates a new <li> element, appends it to the menu and return it. Where −

  • <ul> is the element that must be appended to the newly created <li> element.

  • item

    can be a label(String), the string to display for the item, or a value(String), the value to insert into the input when the item is selected.
2 _renderMenu( ul, 项目 )

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

_renderMenu( ul, items )

This method controls building the widget's menu. Where −

  • <ul> is an Array of items that match the user typed term. Each item is an Object with label and value properties.
3 _调整菜单大小()

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

_resizeMenu()

This method controls sizing the menu before it is displayed.The menu element is available at this.menu.element. This method does not accept any arguments.

自动完成元素的事件管理

除了我们在前面几节中看到的自动完成（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。下面列出了这些事件方法 -

先生。 活动方式及说明
1 更改（事件，用户界面）

当 <input> 元素的值根据选择而更改时，会触发此事件。触发时，该事件总是在触发close事件之后发生。

Event - change(event, ui)

This event is triggered when the value of the <input> element is changed based upon a selection. When triggered, this event will always come after the close event is triggered. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • item − The item selected from the menu, if any. Otherwise the property is null.

Syntax

$( ".selector" ).autocomplete({
   change: function( event, ui ) {}
});
2 关闭（事件，用户界面）

每当自动完成菜单关闭时就会触发此事件。

Event - close(event, ui)

This event is triggered whenever the autocomplete menu closes. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).autocomplete({
   close: function( event, ui ) {}
});
3 创建（事件，用户界面）

创建自动完成时会触发此事件。

Event - create(event, ui)

This event is triggered when the autocomplete is created.. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • item − The item selected from the menu, if any. Otherwise the property is null.

Syntax

$( ".selector" ).autocomplete({
   create: function( event, ui ) {}
});
4 焦点（事件，用户界面）

每当菜单选项之一获得焦点时，就会触发此事件。除非取消（例如，通过返回 false），否则焦点值将设置到 <input> 元素中。

Event - focus(event, ui)

This event is triggered whenever one of the menu choices receives focus. Unless canceled (for example, by returning false), the focused value is set into the <input> element. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • item − The focused item.

Syntax

$( ".selector" ).autocomplete({
   focus: function( event, ui ) {}
});
5 打开（事件，用户界面）

该事件在数据准备好且菜单即将打开后触发。

Event - open(event, ui)

This event is triggered after the data has been readied and the menu is about to open. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).autocomplete({
   open: function( event, ui ) {}
});
6 响应（事件，用户界面）

该事件在搜索完成后、菜单显示之前触发。搜索完成时始终会触发此事件，即使由于没有结果或自动完成功能被禁用而不会显示菜单。

Event - response(event, ui)

This event is triggered after a search completes, before the menu is shown. This event is always triggered when a search completes, even if the menu will not be shown because there are no results or the Autocomplete is disabled. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • content − Contains the response data and can be modified to change the results that will be shown.

Syntax

$( ".selector" ).autocomplete({
   response: function( event, ui ) {}
});
7 搜索（事件，用户界面）

在满足任何延迟和minLength标准之后、在激活由 source 指定的机制之前，会触发此事件。如果取消，则搜索操作将中止。
8 选择（事件，用户界面）

从自动完成菜单中选择一个值时会触发此事件。取消此事件会阻止将值设置到 <input> 元素中（但不会阻止菜单关闭）。

Event - select(event, ui)

This event is triggered when a value is selected from the autocomplete menu. Canceling this event prevents the value from being set into the <input> element (but doesn’t prevent the menu from closing). Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • item − An Object with label and value properties for the selected option.

Syntax

$( ".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.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 的标准浏览器中打开它。您还必须看到以下输出 -