jqueryui时间插件_jQueryUI AutoComplete插件

沈高峻

2023-12-01

jqueryui时间插件

In this post, we will discuss about one of the useful plugins provided by jQuery to speed up the user interactions in your application, the Autocomplete plugin.

在本文中，我们将讨论jQuery提供的用于加速应用程序中用户交互的有用插件之一，即Autocomplete插件。

You can easily integrate the Autocomplete plugin in your application. This enables the users to easily search and filter items from an already populated list of items as they type on any input fields.

您可以轻松地将Autocomplete插件集成到您的应用程序中。这样，用户在任何输入字段上键入内容时，都可以轻松地从已经填充的项目列表中搜索和过滤项目。

内容 (Contents)

jQueryUI自动完成插件选项 (jQueryUI Autocomplete Plugin Options)

In this section, we will discuss about different options available to customize the jQueryUI Autocomplete plugin. We have used many of these options in the jQueryUI Autocomplete Plugin in Action section.

在本节中，我们将讨论可用于自定义jQueryUI自动完成插件的不同选项。我们在“ jQueryUI自动完成插件在操作”部分中使用了许多这些选项。

Options	Syntax	Description
appendTo	$( “.selector” ).autocomplete({ appendTo: “#someElement” });	Used to append an element to the menu.
autoFocus	$( “.selector” ).autocomplete({ autoFocus: true });	First item in the menu will be automatically focused if it is set to true.
delay	$( “.selector” ).autocomplete({ delay: 400 });	An integer value in milliseconds which denotes the time wait before finding the matching values.
disabled	$( “.selector” ).autocomplete({ disabled: true });	Setting to true will disable the autocomplete.
minLength	$( “.selector” ).autocomplete({ minLength: 0 });	An integer value representing the number of characters to type before finding the matching values.
position	$( “.selector” ).autocomplete({ position: { my : “right top”, at: “right bottom” } });	This option is used to identify the position of autocomplete suggestions menu in relation to the associated input field.
source	$( “.selector” ).autocomplete({ source: [some array] });	This option must be specified which defines the data to use for the autocomplete menu.

选件	句法	描述
appendTo	$（“ .selector”）.autocomplete（{appendTo：“ #someElement”}）;	用于将元素添加到菜单。
自动对焦	$（“ .selector”）.autocomplete（{autoFocus：true}）;	如果设置为true，则菜单中的第一项将自动聚焦。
延迟	$（“ .selector”）.autocomplete（{delay：400}）;	以毫秒为单位的整数值，表示找到匹配值之前的等待时间。
残障人士	$（“ .selector”）.autocomplete（{disable：true}）;	设置为true将禁用自动完成功能。
minLength	$（“ .selector”）.autocomplete（{minLength：0}）;	一个整数值，表示找到匹配值之前要键入的字符数。
位置	$（“ .selector”）.autocomplete（{position：{my：“ right top”，at：“ right bottom”}}）;	此选项用于标识自动完成建议菜单相对于关联的输入字段的位置。
资源	$（“ .selector”）.autocomplete（{来源：[some array]}）;	必须指定此选项，该选项定义用于自动完成菜单的数据。

The above table briefly describes the different options in Autocomplete plugin and its syntax.

上表简要描述了自动完成插件中的不同选项及其语法。

jQueryUI自动完成插件方法 (jQueryUI Autocomplete Plugin Methods)

In this section, we will look into the jQueryUI Autocomplete plugin methods and its syntax. These methods are very useful when you deal with the Autocomplete plugin.

在本节中，我们将研究jQueryUI Autocomplete插件方法及其语法。当您处理自动完成插件时，这些方法非常有用。

Methods	Usage	Description
close()	$( “.selector” ).autocomplete( “close” );	This method is used to close the autocomplete menu.
destroy()	$( “.selector” ).autocomplete( “destroy” );	This method will completely remove the autocomplete functionality.
disable()	$( “.selector” ).autocomplete( “disable” );	This method is used to disable the autocomplete functionality.
enable()	$( “.selector” ).autocomplete( “enable” );	This method enables the autocomplete functionality.
instance()	$( “.selector” ).autocomplete( “instance” );	This method is used to get the autocomplete’s instance object
option( optionName, value )	$( “.selector” ).autocomplete( “option”, “disabled”, true );	This method is used to set the value of the autocomplete option associated with the optionName.
search(,[value ] )	$( “.selector” ).autocomplete( “search”, “” );	Triggers the search event using the input value.
widget()	$( “.selector” ).autocomplete( “widget” );	This method will return a jQuery object which contains the autocomplete menu element.

方法	用法	描述
关（）	$（“ .selector”）.autocomplete（“ close”）;	此方法用于关闭自动完成菜单。
破坏（）	$（“ .selector”）.autocomplete（“ destroy”）;	此方法将完全删除自动完成功能。
disable（）	$（“ .selector”）.autocomplete（“禁用”）;	此方法用于禁用自动完成功能。
enable（）	$（“ .selector”）.autocomplete（“启用”）;	此方法启用自动完成功能。
instance（）	$（“ .selector”）.autocomplete（“ instance”）;	此方法用于获取自动完成的实例对象
option（optionName，value）	$（“ .selector”）.autocomplete（“ option”，“ disabled”，true）;	此方法用于设置与optionName关联的自动完成选项的值。
搜索（，[值]）	$（“ .selector”）.autocomplete（“ search”，“”）;	使用输入值触发搜索事件。
小部件（）	$（“ .selector”）.autocomplete（“ widget”）;	此方法将返回一个包含自动完成菜单元素的jQuery对象。

This table briefly describes the methods used to customize the autocomplete plugin.

下表简要介绍了用于自定义自动完成插件的方法。

jQueryUI自动完成插件事件 (jQueryUI Autocomplete Plugin Events)

In this section, we will discuss about different events associated with jQueryUI Autocomplete plugin.

在本节中，我们将讨论与jQueryUI Autocomplete插件相关的不同事件。

Methods	Usage	Description
change( event, ui )	$( “.selector” ).autocomplete({,change: function( event, ui ) {}});	This event is fired when the value is changed and executes the callback function.
close( event, ui )	$( “.selector” ).autocomplete({,close: function( event, ui ) {}});	This is fired when the autocomplete menu is closed or hidden.
create( event, ui )	$( “.selector” ).autocomplete({,create: function( event, ui ) {}});	This is fired on creation of the autocomplete.
focus( event, ui )	$( “.selector” ).autocomplete({,focus: function( event, ui ) {}});	This is fired when an item in the menu is focused.
open( event, ui )	$( “.selector” ).autocomplete({,open: function( event, ui ) {}});	This is fired when the autocomplete option is opened or updated with matching values.
response( event, ui )	$( “.selector” ).autocomplete({,response: function( event, ui ) {}});	This event is fired after completing search operation.
search( event, ui )	$( “.selector” ).autocomplete({,search: function( event, ui ) {}});	This events fires before starting the search operation.
select( event, ui )	$( “.selector” ).autocomplete({,select: function( event, ui ) {}});	This event is fired when an item in the menu is selected.

方法	用法	描述
更改（事件，用户界面）	$（“ .selector”）.autocomplete（{，change：function（event，ui）{}}）;	更改值并执行回调函数时将触发此事件。
close（event，ui）	$（“ .selector”）.autocomplete（{，close：function（event，ui）{}}）;	关闭或隐藏自动完成菜单时会触发此事件。
create（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）{}}）;	在开始搜索操作之前会触发此事件。
select（event，ui）	$（“ .selector”）.autocomplete（{，select：function（event，ui）{}}）;	选择菜单中的一个项目时会触发此事件。

The above table briefly describes the events associated with the autocomplete plugin.

上表简要描述了与自动完成插件相关的事件。

jQueryUI自动完成插件在行动 (jQueryUI Autocomplete Plugin in Action)

In this section, we will try different examples to explore the uses of jQueryUI Autocomplete plugin.

在本节中，我们将尝试不同的示例来探索jQueryUI Autocomplete插件的用法。

默认功能 (Default Functionality)

The following example demonstrates the default functionality of the Autocomplete plugin. You will find suggestions as you start typing on the input field.

以下示例演示了自动完成插件的默认功能。在输入字段开始输入时，您会找到建议。

autocomplete-default.html

<!doctype html>
<html>
   <head>
      <title>jQueryUI Autocomplete - Default Functionality</title>
      <link href="https://code.jquery.com/ui/1.10.4/themes/south-street/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            var countryNames = [
               "Australia",
               "Austria",
               "Bangladesh",
               "Chile",
               "China",
               "Denmark",
               "England",
               "France",
               "Finland",
               "Greece",
               "Germany",
               "Honkong",
               "India",
               "Japan",
               "kazakhstan",
               "USA",
               "Zimbabwe"
            ];

            $( "#automplete" ).autocomplete({
               source: countryNames
            });
         });
      </script>

   </head>
   <body>
      <div class="ui-widget">
         <label for="automplete">Country : </label>
         <input id="automplete">
      </div>
   </body>
</html>

You can see this feature in action as you type on the input field shown below.

在下面显示的输入字段上键入时，您可以看到此功能的运行情况。

演示地址

使用头寸期权 (Use of position Option)

The following example demonstrates the use of position option in the autocomplete plugin. In this example, you can see how position option is used to customize the autocomplete menu.

以下示例演示了自动完成插件中position选项的使用。在此示例中，您可以看到如何使用position选项自定义自动完成菜单。

autocomplete-position.html

<!doctype html>
<html>
   <head>
      <title>jQueryUI Autocomplete - Default Functionality</title>
      <link href="https://code.jquery.com/ui/1.10.4/themes/south-street/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 
      <script>
         $(function() {
            var countryNames = [
               "Australia",
               "Austria",
               "Bangladesh",
               "Chile",
               "China",
               "Denmark",
               "England",
               "France",
               "Finland",
               "Greece",
               "Germany",
               "Honkong",
               "India",
               "Japan",
               "kazakhstan",
               "USA",
               "Zimbabwe"
            ];
 
            $( "#automplete" ).autocomplete({
               source: countryNames
            });
            $( "#automplete" ).autocomplete("option", "position", { my : "right-10 top+40", at: "right top" }) 
         });
      </script>
   </head>
   <body> 
      <div class="ui-widget">
         <label for="automplete">Country: </label>
         <input id="automplete">
      </div>
   </body>
</html>

You can see this feature in action as you type on the input field shown below. You may have noticed the change in position of the autocomplete menu in this demo.

在下面显示的输入字段上键入时，您可以看到此功能的运行情况。您可能已经注意到此演示中自动完成菜单的位置发生了变化。

演示地址

I hope you understood the basic usage of the autocomplete plugin. You can try using the available options, methods and events to customize the autocomplete plugin.

我希望您了解自动完成插件的基本用法。您可以尝试使用可用的选项，方法和事件来自定义自动完成插件。

That’s all for now and we will see some more jQuery plugins in the coming posts.

到此为止，我们将在接下来的文章中看到更多的jQuery插件。

翻译自: https://www.journaldev.com/5667/jqueryui-autocomplete-plugin

jqueryui时间插件

jqueryui时间插件_jQueryUI AutoComplete插件

内容 (Contents)

jQueryUI自动完成插件选项 (jQueryUI Autocomplete Plugin Options)

jQueryUI自动完成插件方法 (jQueryUI Autocomplete Plugin Methods)

jQueryUI自动完成插件事件 (jQueryUI Autocomplete Plugin Events)

jQueryUI自动完成插件在行动 (jQueryUI Autocomplete Plugin in Action)

默认功能 (Default Functionality)

使用头寸期权 (Use of position Option)

相关阅读

相关文章

相关问答

相关文档