Создание виджета автозаполнения пользовательского интерфейса jQuery

Question

Мне нужно автозаполнение в приложении, над которым я работаю, и, поскольку я уже использую jQuery UI, я пытаюсь сделать так, чтобы его виджет автозаполнения отвечал моим потребностям.

Первый шаг - сделать так, чтобы поисковый запрос соответствовал только началу предложенных терминов. У меня уже есть эта работа, как вы можете видеть в коде ниже. Второй шаг - первое предложение на самом деле автозаполнение .

Что, вероятно, требует небольшого объяснения. Когда я слышу «автозаполнение», я предполагаю, что введите «f», и содержимое текстового поля изменится на «foo», с выбранным «oo», так что он будет заменен, если я наберу другой символ и оставлю в поле Я вкладываю из этого. Обычно я бы назвал то, что предлагает виджет автозаполнения, а не автозаполнение.

Глядя на внутреннюю работу 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

Взял часть проверки длины и изменил функцию фильтра в поиске.Таким образом, вы можете воспользоваться преимуществами обработки 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 );
                }
    });