發佈日期：
分類：
如何使用jQuery及jQuery UI‧建立自動完成(auto complete)輸入欄位
自動完成的好處，就是為我這一種的懶人帶來方便。利用jQuery及jQuery UI，便可輕易做出這效果。
01. jQuery UI在版本1.8.13，包含了31個元件，您可以一次過在jQuery UI下載所有元件，也可以根據您自己需要，下載只需用到的其中一個元件。
02. 今次測試，只下載autocomplete元件，版本為1.8.13。jQuery會使用1.6.1版本。
03. jQuery UI，除包含js檔案外，另外也包括css檔案。只要載入相關檔案，再更改css內容，便可輕易做到您需要的效果。(測試效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p {
font-size: 11pt;
}
</style>
<link rel="stylesheet" href="jquery-ui-1.8.13.autocomplete.css">
<script src="jquery-1.6.1.min.js"></script>
<script src="jquery-ui-1.8.13.autocomplete.min.js"></script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<p>
<label for="tags">Tags: </label>
<input id="tags">
</p>
</div>
</div>
<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>
</body>
</html
註：jQuery版本為1.6.1，jQuery UI autocomplete版本為1.8.13。
發佈留言