使jQuery UI的自动完成小部件*实际上*自动完成

Question

我需要在我正在使用的应用程序中自动完成，因为我已经在使用jQuery UI，我正在尝试使其自动完成小部件满足我的需求。

第一步是使搜索词仅在建议词的开头匹配。我已经有了这个工作，你可以在下面的代码中看到。第二步是让第一个建议实际上自动完成。

这可能需要一些解释。当我听到“自动完成”时，我设想键入“f”并将文本字段的内容更改为“foo”，并选择“oo”，以便在我键入另一个字符并将其留在字段中时将其替换为我发布了它。我通常会调用Autocomplete小部件建议的内容，而不是自动完成。

看看Autocomplete如何在内部运作，我认为autocompleteopen事件是正确的地方（每次更新建议列表时都会调用它），但我不知道如何从那里访问建议清单。

有什么想法吗？

$("#field").autocomplete({
    delay: 0,

    source: function filter_realms(request, response) {
        var term = request.term.toLowerCase();
        var length = term.length;

        response($.grep(candidates, function(candidate) {
            return candidate.substring(0, length).toLowerCase() === term;
        }));
    },

    open: function(event, ui) {
        // magic happens here?
    }
});

Answer 1

知道了。我忘记了可以通过.data()访问小部件。

$("#field").autocomplete({
    delay: 0,

    source: function filter_realms(request, response) {
        var term = request.term.toLowerCase();
        var length = term.length;

        response($.grep(candidates, function(candidate) {
            return candidate.substring(0, length).toLowerCase() === term;
        }));
    },

    open: function(event, ui) {
        var current = this.value;
        var suggested = $(this).data("autocomplete").menu.element.find("li:first-child a").text();

        this.value = suggested;
        this.setSelectionRange(current.length, suggested.length);
    }
});

Answer 2

获取长度检查部分并修改搜索中的过滤功能。这样您就可以利用UI的JSON处理。

    filter: function(array, term) {
    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );

    var smatcher = term.toLowerCase();
    var length = smatcher.length;


    return $.grep( array, function(value) {
                if(value.label.substring(0, length).toLowerCase() == smatcher){
                    return matcher.test( value.label || value.value || value );
                }
    });