jQuery UI autocomplete
jQuery UI autocomplete
现代网站中经常使用自动完成机制，以在文本框中键入起始单词的同时向用户提供建议列表。它方便用户从列表中选择一个项目，该项目将显示在输入字段中。此功能可防止用户输入整个单词或一组单词。
jQueryUI提供了一个自动完成小部件，可通过在文本框中提供一系列建议来方便用户。这是一个控件，其行为与<select>下拉列表非常相似，但是会过滤选择以仅显示与用户在控件中键入的内容匹配的选项。
语法:
您可以以两种形式使用autocomplete()方法:
$(selector, context).autocomplete (options)
$(selector, context).autocomplete ("action", params)
第一种方法
$(selector, context).autocomplete(options)方法指定必须将HTML <input>元素作为输入字段进行管理，该元素将显示在建议列表上方。这里的options参数是一个对象，用于指定用户在输入字段中键入内容时建议列表的行为。
语法:
$(selector, context).autocomplete (options);
您可以使用JavaScript对象同时使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示:
$(selector, context).autocomplete({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表:
| 选项 | 说明 |
| appendTo | 此选项用于将元素添加到菜单。默认情况下，其值为null。 |
| autoFocus | 如果将此选项设置为TRUE，则显示菜单时，菜单的第一项将自动聚焦。默认情况下，其值为FALSE。 |
| delay | 此选项指定尝试获取匹配值之前等待的时间(以毫秒为单位)(由source选项指定)。默认情况下，其值为300。 |
| disabled | 如果将此选项设置为true，则最初将禁用自动完成小部件。默认情况下，其值为false。 |
| minlength | 它指定尝试获取匹配值之前必须输入的字符数(由source选项指定)。默认情况下，其值为1。 |
| position | 此选项根据输入元素标识建议菜单的位置。默认情况下，其值为{my: " left top"，at: " left bottom"，碰撞: " none"}。 |
| source | 此选项指定获取与输入数据匹配的数据的方式。您必须提供一个值，否则将不会创建自动完成小部件。默认情况下，其值为none；必须指定。 |
jQuery UI autocomplete()示例1
让我们举一个简单的示例来演示autocomplete小部件功能，不向autocomplete()方法传递任何参数。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<p>Available Courses:</p>
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
jQuery UI autocomplete()方法示例2
在jQueryUI autocomplete()方法中使用autoFocus:
让我们演示在自动完成方法中使用选项autoFocus的示例。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags").autocomplete({
source: availableTags
autofocus:true
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
jQuery UI autocomplete()方法示例3
minLength的使用和jQueryUI autocomplete()方法中的延迟:
让我们以一个示例来演示jQueryUI autocomplete()方法中两个选项minLength和delay的用法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags").autocomplete({
source: availableTags
minLength:2,
delay:500,
});
});
</script>
</head>
<body>
<div class="ui-widget">
<p>Type two letter for e.g:ja,sc etc</p>
<p>Available Courses:</p>
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
jQuery UI autocomplete()方法示例4
在jQueryUI autocomplete()方法中使用标签:
一个示例来演示jQueryUI的自动完成小部件中选项标签的用法:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#autocomplete-4").autocomplete({
source: [
{ label: "India", value: "IND" },
{ label: "America", value: "USA" },
{ label: "Pakistan", value: "PAK" },
{ label: "Iceland", value: "ICE" },
{ 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>