jquery-autocomplete – jQuery UI自动完成同时使用类别和重音折叠

2019年8月4日 126次阅读

我正在使用jQuery UI Autocomplete小部件.我希望能够同时使用两种不同的功能 – 分类和重音折叠.

我可以使用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>

我想我可以用重音折叠示例中的’source’替换类别示例中的’source'(源：数据)(源：function(请求,响应)…… )但这似乎不起作用.

那么,我如何将类别和重音折叠的功能组合成一个自动完成？

谢谢.

最佳答案 我更喜欢将重音折叠逻辑集成到过滤器中,而不是像jquery示例那样操作源项.

通过这种方式,您可以使用所有功能,包括分组类别,搜索词突出显示….

第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));
    }
});
点赞