srcmini本文概述
- 第一种方法
- jQuery UI autocomplete()示例1
- jQuery UI autocomplete()方法示例2
- jQuery UI autocomplete()方法示例3
- jQuery UI autocomplete()方法示例4
在现代网站中, 自动完成机制经常用于在文本框中键入起始单词时向用户提供建议列表。它方便用户从列表中选择一个项目, 该项目将显示在输入字段中。此功能可防止用户输入整个单词或一组单词。
jQueryUI提供了一个自动完成小部件, 通过在文本框中提供一系列建议来方便用户。它是一个非常类似于<select>下拉列表的控件, 但是过滤选择以仅显示与用户在控件中键入内容匹配的选项。
句法：
你可以两种形式使用autocomplete()方法：
$(selector, context).autocomplete (options) Method$(selector, context).autocomplete ("action", params) Method第一种方法
自动完成（选项）方法指定必须将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()方法传递任何参数。
<!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中使用autoFocus autocomplete()方法：
让我们以一个示例来演示自动完成方法中选项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
在jQueryUI中使用minLength和delay的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中使用lable 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>立即测试
评论前必须登录！
注册