Добавить предложенный результат к автозаполнению ввода пользовательского интерфейса jQuery? - PullRequest
Новая
       10

Добавить предложенный результат к автозаполнению ввода пользовательского интерфейса jQuery?

1 голос
/ 29 июня 2011

Я пытаюсь расширить автозаполнение пользовательского интерфейса jQuery, чтобы оно напоминало поле поиска Google, где оставшийся текст в верхнем предложенном результате (т. Е. Все, что не является request.term) добавляется в конец введенной пользователем строки в другом цвете.

Я планировал сделать это, поместив прозрачный div идентичного размера за исходным входом, используя относительное позиционирование, и результат с наилучшим соответствием поместил в этот div более светлый цвет.

Мой вопрос: правильный способ доступа к массиву совпадающих результатов. Мой подход заключается в следующем (упрощенный пример): 

$(function() {
    var tags = [
        "One",
        "Two",
        "Three"
    ];
    $("input").autocomplete({
        source: tags,
        open: function() {
            // var topResult = HOW TO ACCESS?
            $('#divForText').text(topResult);
        }
    });
});

Может кто-нибудь уточнить, как получить доступ к первому значению в массиве сопоставленных результатов?

1 Ответ

2 голосов
/ 29 июня 2011

Вот один из способов сделать это: 

$("input").autocomplete({
    source: function(request, response) {
        var filtered = $.ui.autocomplete.filter(tags, request.term)
            , first = filtered.length ? filtered[0] : null;

        if (first) {
            $("#divForText").text(first);
        } else {
            $("#divForText").empty();
        }

        response($.ui.autocomplete.filter(langs, request.term));
    }
});

В основном, это использует версию source, которая принимает функцию в качестве параметра. Эта функция просто использует метод filter, который для автозаполнения использует внутренне , а затем обновляет содержимое.

Вот рабочий пример: http://jsfiddle.net/UGsHR/75/

...