jQuery的Autocomplete插件

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">

<label for="tags">Tags: </label>

<input id="tags">

</div>

</body>

</html>

jQuery的Autocomplete插件

相关推荐