Реализация автозаполнения пользовательского интерфейса jquery для отображения предложений при вводе "@"

Я использую автозаполнение пользовательского интерфейса jquery, чтобы позволить пользователям отмечать друзей с помощью @mentions. По умолчанию предложения автозаполнения появляются, когда вы сразу ставите курсор на текстовое поле. Как сделать так, чтобы предложения появлялись только при вводе "@"? Это код, который я до сих пор:

var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            ];
$("#tags").autocomplete({
    source: availableTags,
    minLength: 0
});
Источник

3 ответа

Решение

Вы можете сделать это, предоставив функцию source опция автозаполнения:

var availableTags = [ /* Snip */];

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

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

$("#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 the user typed an "@": */
        if (term.indexOf("@") >= 0) {
            term = extractLast(request.term);
            /* If they've typed anything after the "@": */
            if (term.length > 0) {
                results = $.ui.autocomplete.filter(
                availableTags, term);
            /* Otherwise, tell them to start typing! */
            } else {
                results = ['Start typing...'];
            }
        }
        /* Call the callback with the results: */
        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/BfAtM/2/

Обратите внимание, что это практически идентично этой демонстрации, за исключением того, что пользователь должен ввести "@". Этот код находится внутри source опционный аргумент.

Надеюсь, это поможет.

Источник

На момент написания этой заметки я рекомендую плагин jquery.mentionsInput. Он поддерживает теги @mention, как на Facebook, в комплекте с аватарами и локальными или ajax-данными.

http://podio.github.com/jquery-mentions-input/

Источник

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

Если массив, который в конечном итоге становится значением source пуст, виджет не будет отображать раскрывающийся список. Итак, определяя source как функция, способная возвращать непустой массив только тогда, когда @ введено заставит виджет вести себя так, как вы хотите.

Тем не менее, виджет функционирует как часть компонента утилиты управления тегами (в дальнейшем упоминается как " упоминание"), которая имеет 3 компонента:

  1. Модуль автозаполнения: Компонент, отвечающий за получение и отображение набора элементов, которые могут использоваться для создания упоминания по заданной строке.

  2. Модуль отслеживания упоминаний: компонент, отвечающий за отслеживание данных, связанных с упоминаниями; как минимум, местоположение, а также поверхностные и существенные (если они существуют) значения каждого упоминания должны отслеживаться во всех модификациях текста элемента ввода, к которому прикреплена утилита.

  3. Модуль визуального разграничения упоминания: компонент, отвечающий за различие текста упоминания от остального текста в элементе ввода, к которому прикреплена утилита

Дальнейшее изучение реализации двух оставшихся модулей на простом английском языке было бы утомительным; гораздо лучше смотреть на код! К счастью, я разработал решение, Mentionator, которое является надежным (в большей степени, чем все другие предлагаемые здесь решения), хорошо структурированным, легким для понимания и обильно прокомментированным. Так что стоит посмотреть, хотите ли вы создать оригинальное решение или справочный материал для создания собственного.

Источник
Другие вопросы по тегам