jQuery Autocomplete 插件根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符,插件开始搜索匹配的条目并显示供选择的值的列表。通过输入更多的字符,用户可以过滤列表以获得更好的匹配。
该插件现在是 jQuery UI 的一部分,独立的版本不会再更新了。目前版本是 1.6。
访问 jQuery Autocomplete 官网,下载 jQuery Autocomplete 插件。
如需了解更多有关 Autocomplete 的细节,请查看 API 文档 自动完成部件(Autocomplete Widget)。
jQuery 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"> |
<label for="tags">Tags: </label> |
<input id="tags"> |
</div> |
</body> |
</html> |