我正在使用 jQuery UI 自动完成小部件。我希望能够同时使用两种不同的功能 - 类别和重音折叠。
我可以使用来自 jQuery UI 网站 (http://jqueryui.com/autocomplete/) 的源代码让两者独立工作。
对于类别:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Categories</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<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>
对于重音折叠:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Accent folding</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<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>
我以为我可以用重音折叠示例中的“源”替换类别示例(即源:数据)中的“源”(即源:函数(请求，响应)...... ) 但这似乎不起作用。
那么，如何将类别和重音折叠的功能结合到一个自动完成功能中？
谢谢。
最佳答案
我更喜欢将重音折叠逻辑集成到过滤器中，而不是像在 jquery exsample 中那样操作源项。
通过这种方式，您可以使用所有功能，包括分组类别、搜索词突出显示......
第 1 步:使用不区分重音的 (*AI) 正则表达式转义和过滤器扩展 $.ui.autocomplete
$.extend($.ui.autocomplete, {
escapeRegexAI: function (value) {
return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
.replace("a", "[a|ä|à|â]")
.replace("c", "[c|ç]")
.replace("e", "[e|é|è|ê|ë]")
.replace("i", "[i|î|ï]")
.replace("o", "[o|ö|ô]")
.replace("u", "[u|ü|ù|û]")
.replace("y", "[y|ÿ]");
},
filterAI: function (array, term) {
var matcher = new RegExp($.ui.autocomplete.escapeRegexAI(term), "i");
return $.grep(array, function (value) {
return matcher.test(value.label || value.value || value);
});
}
});
第 2 步:使用重音不敏感过滤器调用自动完成功能
$( "#developer" ).autocomplete({
source: function( request, response ) {
response($.ui.autocomplete.filterAI(data, request.term));
}
});
关于jquery-autocomplete - 同时使用类别和重音折叠的 jQuery UI 自动完成，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12997125/