Как получить автозаполнение наподобие Stack Overflow

Question

Я пытаюсь реализовать автозаполнение, как переполнение стека для завершения тега. Тем не менее, я попытался просмотреть источник и его minified

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

Существуют ли примеры, показывающие, как сделать что-то подобное? или я могу как-то просмотреть не минифицированную версию источника?

Answer 1

Я не знаю точно, как это сделать, но....

если вы посмотрите на этот ответ: jQueryUI: как я могу отформатировать результаты плагина автозаполнения?

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

Я не пробовал этого, но я полагаю, что, открыв этот черный ящик и заменив или переназначив renderMenu и связанные с ним функции, вы 'я мог бы делать то, что вы хотите - визуализировать только один элемент в фактическом текстовом поле.

В любом случае это то, с чего я бы начал.

---

РЕДАКТИРОВАТЬ

Я снова посмотрел на автозаполнение в пользовательском интерфейсе jQuery.Кажется довольно простым заменить логику отображения меню, вставив пользовательскую функцию response().

Вот что я сделал:

// display the first item in the list of possible completions
var myResponse =  function( items ) {
    var itemToSuggest, p1, p2;
    if (items.length === 0) {return;}
    itemToSuggest = items[0];
    this.element.val( itemToSuggest );
    p1 = this.term.length;
    p2 = itemToSuggest.length;
    setSelectionRange(this.element[0], p1, p2);
};

var oldFn = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = myResponse;

Рабочий пример

Answer 2

Вы можете просмотреть jQuery UI Autocomplete .

Полный исходный код доступен в их репозитории Git .

Answer 3

Вероятно, что-то вроде Chosen прекрасно справится с этой задачей

http://harvesthq.github.com/chosen/

Answer 4

Используйте автофокусировку автозаполнения пользовательского интерфейса jQuery. Это должно автоматически сфокусироваться на первом найденном элементе в списке.

Автофокус