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

Ответ 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/

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

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

Ответ 2

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

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

Вы называете это следующим образом:

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

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

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

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