jQueryUI自动完成插件
时间：2020-02-23 14:46:17 来源:igfitidea点击:
在这篇文章中，我们将讨论jQuery提供的用于加速应用程序中用户交互的有用插件之一，即Autocomplete插件。
您可以轻松地将Autocomplete插件集成到您的应用程序中。
这样，用户在任何输入字段上键入内容时，都可以轻松地从已经填充的项目列表中搜索和过滤项目。
jQueryUI自动完成插件选项
在本节中，我们将讨论可用于自定义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. |
jQueryUI自动完成插件方法
在本节中，我们将研究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. |
jQueryUI自动完成插件事件
在本节中，我们将讨论与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. |
jQueryUI自动完成插件的使用
在本节中，我们将尝试不同的示例来探索jQueryUI Autocomplete插件的用法。
默认功能
以下示例演示了自动完成插件的默认功能。
在输入字段中开始输入时，您会发现建议。
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",
"San Franceco",
"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>
在下面显示的输入字段上键入内容时，您可以看到此功能的运行情况。
使用头寸期权
以下示例演示了自动完成插件中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",
"San Franceco",
"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>
