автозаполнение в середине текста (например, Google Plus)

Question

Существует множество вариантов выполнения автозаполнения.Большинство из них, похоже, работают с первыми набранными буквами.

В Google Plus параметр автозаполнения открывается сразу после ввода @, независимо от того, где он находится в поле формы, и используетбуквы, следующие сразу за @, для указания автозаполнения.(Это также выглядит довольно неплохо!)

Кто-нибудь поделился кодом для такого рода вещей?

У кого-нибудь есть какие-нибудь указатели для попытки реализовать эту игрушечную версию (например, в jQuery)

Answer 1

Это возможно с виджетом автозаполнения jQueryUI . В частности, вы можете адаптировать это демо для удовлетворения ваших требований. Вот пример:

function split(val) {
    return val.split(/@\s*/);
}

function extractLast(term) {
    return split(term).pop();
}

var availableTags = [ ... ]; // Your local data source.

$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
        event.preventDefault();
    }
}).autocomplete({
    minLength: 0,
    source: function(request, response) {
        var term = request.term,
            results = [];
        if (term.indexOf("@") >= 0) {
            term = extractLast(request.term);
            if (term.length > 0) {
                results = $.ui.autocomplete.filter(
                availableTags, term);
            }
        }
        response(results);
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function(event, ui) {
        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join("");
        return false;
    }
});

И вот оно работает: http://jsfiddle.net/UdUrk/

Дайте мне знать, если вам нужна дополнительная информация (например, как заставить его работать с удаленным источником данных).

Обновление: Вот пример использования удаленного источника данных (API StackOverflow): http://jsfiddle.net/LHNky/. Он также включает настраиваемое отображение предложений автозаполнения.

Answer 2

Я написал плагин jQuery на основе функции автозаполнения пользовательского интерфейса jQuery.Вот мое решение:

http://www.hawkee.com/snippet/9391/

Вы называете это так:

$('#inputbox').triggeredAutocomplete({
    hidden: '#hidden_inputbox',
    source: "/search.php",
    trigger: "@"
});

Answer 3

Чтобы немного расширить ответ Эндрю Уиттакера, опция source функции автозаполнения пользовательского интерфейса jQuery используется для указания массива, содержащего элементы, которые должны отображаться в раскрывающемся списке после запуска виджета. Его можно определить как такой массив, функцию, которая возвращает такой массив, или URL-адрес ресурса, который создает такой массив.

Если source определено как функция, параметры функции request и response могут быть использованы для составления возвращаемого массива и предоставления его виджету соответственно. request, в частности, представляет интерес для вас, так как его член, term содержит значение элемента ввода, к которому прикреплен виджет, во время вызова функции.

Видите, куда я иду с этим? Это довольно просто, разобрать request.term для текста между интересующим символом @ и курсором, и использовать этот текст для создания массива для предоставления виджету. Однако вам потребуется проделать небольшую работу (или использовать некоторые готовые функции), чтобы иметь возможность надежно размещать курсор в кросс-браузерном режиме.

Проверьте Упоминание , если вы ищете существующий плагин, который предоставляет функции, которые вы пытаетесь эмулировать. Он хорошо структурирован, легок для понимания и обильно прокомментирован, поэтому у вас не должно возникнуть проблем с пониманием того, как использовать описанный мной подход. Это также поддерживается вашим по-настоящему :).

Answer 4

Я написал для этого плагин начальной загрузки.Это работает независимо от того, где @ встречается в поле формы.Это для divE ContentEditable, а не для текстовой области: http://sandglaz.github.com/bootstrap-tagautocomplete/

Answer 5

Вы можете использовать событие автозаполнения поиска, чтобы определить, содержит ли текст @.Если это не @, тогда просто верните false и автозаполнение не будет работать.

например: $ (".selector") .autocomplete ({search: function (event, ui) {...}});