jQuery 入门教程(23): jQuery UI Autocomplete示例（一）
jerry JQuery 2015年08月24日
收藏
AutoComplete 在获取焦点后，随着用户键入的内容，可以在预订的数据源中查找和已输入的内容相匹配的内容列表供用户选择。
这可以用作之前输入过的内容也可以用作自动填充相关内容，比如根据城市名，自动填充邮编等。
你可以使用本地数据源或是远程数据源，本地数据一般使用小数据集合，比如包含50条记录的通讯录，远程数据源一般为保护大量记录的数据库。
基本用法
本例为使用AutoComplete的基本用法，通过本地数据源（数组）定义一组语言列表，用户输入字母后，包含该字母的语言会作为列表显示出来：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Demos</title>
<link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/jquery-ui-1.10.1.custom.js"></script>
<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>
语调支持
某些语言支持语调字符，比如Jörn 中的ö，希望在输入o时，也能显示包含ö的内容，AutoComplete支持使用function来定义Source属性：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Demos</title>
<link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/jquery-ui-1.10.1.custom.js"></script>
<script>
$(function () {
var names = ["Jörn Zaefferer",
"Scott González",
"John Resig"];
var accentMap = {
"á": "a",
"ö": "o"
};
var normalize = function (term) {
var ret = "";
for (var i = 0; i < term.length; i++) {
ret += accentMap[term.charAt(i)]
|| term.charAt(i);
}
return ret;
};
$("#developer").autocomplete({
source: function (request, response) {
var matcher
= new RegExp($.ui.autocomplete
.escapeRegex(request.term),"i");
response($.grep(names, function (value) {
value = value.label
|| value.value
|| value;
return matcher.test(value)
|| matcher.test(normalize(value));
}));
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<form>
<label for="developer">Developer: </label>
<input id="developer" />
</form>
</div>
</body>
</html>
分类支持
本例是提供简单扩展AutoComplete 组件实现了一个自定义的custom.catcomplete UI组件以支持AutoComplete的分类支持。自定义组件有兴趣的可以参见jQuery 的Widget Factory。一般无需自定义UI组件，如果需要，可以在网站查找是否有人已经实现你需要的UI组件，实在不行才自定义UI组件，使用Widget Factory自定义组件的方法并不十分直观（这是因为JavaScript使用了面向“原型”的面向对象方法，而非通常的使用类的面向对象方法）。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Demos</title>
<link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/jquery-ui-1.10.1.custom.js"></script>
<style>
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
</style>
<script>
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function (ul, items) {
var that = this,
currentCategory = "";
$.each(items, function (index, item) {
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>"
+ item.category + "</li>");
currentCategory = item.category;
}
that._renderItemData(ul, item);
});
}
});
</script>
<script>
$(function () {
var data = [
{ label: "anders", category: "" },
{ label: "andreas", category: "" },
{ label: "antal", category: "" },
{ label: "annhhx10", category: "Products" },
{ label: "annk K12", category: "Products" },
{ label: "annttop C13", category: "Products" },
{ label: "anders andersson", category: "People" },
{ label: "andreas andersson", category: "People" },
{ label: "andreas johnson", category: "People" }
];
$("#search").catcomplete({
delay: 0,
source: data
});
});
</script>
</head>
<body>
<label for="search">Search: </label>
<input id="search" />
</body>
</html>
其中custom.catcomplete为自定义的UI组件，因此$( “#search” ).catcomplete 使用catcomplete ，而非autocomplete。
推荐文章
