jquery - 让 jQuery UI 的自动完成小部件*实际上*自动完成

Question

我需要在我正在开发的应用程序中自动完成，并且由于我已经在使用 jQuery UI，我正在尝试使其自动完成小部件满足我的需求。

第一步是使搜索词仅匹配建议词的开头。我已经做到了这一点，正如您在下面的代码中看到的那样。第二步是让第一个建议实际上自动完成。

这可能需要一些解释。当我听到“自动完成”时，我设想输入“f”并将文本字段的内容更改为“foo”，并选择“oo”，这样如果我输入另一个字符并留在字段中，它就会被替换我退出它。我通常将自动完成小部件所做的称为建议，而不是自动完成。

看看自动完成的内部工作原理，我认为 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);
    }
});