Twitter Typeahead.js, обратный вызов события `suggestionsRendered`, как мне получить данные о предложениях?

Как я могу подключиться к событию `suggestionsRendered` Twitter Typeahead и получить доступ к отфильтрованным данным, чтобы я мог обновить свою таблицу, используя эти данные?

Я использую Twitter Bootstrap 3, в этой версии плагин typeahead перемещен в собственную библиотеку, а старый плагин typeahead больше не поддерживается.

Я настроил typeahead для работы, как мне хотелось бы, но у меня есть проблема, из-за которой я хотел бы, чтобы библиотека запускала обратный вызов после того, как suggestionsRendered сработало внутри.

Прикрепление событий обычным образом не работает, единственные доступные на данный момент события находятся здесь: https://github.com/twitter/typeahead.js#custom-events

typeahead:initialized (возбуждается при загрузке заголовка ввода (и предварительной выборке данных))
typeahead:opened (срабатывает, когда открывается окно с предложением по вводу текста)
typeahead:closed (срабатывает, когда закрывается окно подсказок)
typeahead:selected (запускается при выборе предложения)
typeahead:autocompleted (срабатывает при нажатии табуляции или при автозаполнении)

Вы можете использовать вышеуказанные события так:

// This is how you use the above events.
$searchTypeahead.on('typeahead:selected',function(evt,data){
    console.log('typeahead:selected');
    console.log(data); // Contains the selected items data
});

Проблема

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

Как я могу получить отфильтрованные данные, которые отображает suggestionsRendered? (Поэтому вместо того, чтобы отображать его в поле ввода, я хочу получить доступ ко всем элементам, чтобы я мог перебирать их и добавлять в таблицу).

Я пробовал гуглить (в списке для SEO): (но нашел информацию, связанную со старой (и неподдерживаемой) версией typeahead)

Предложения twitter bootstrap 3 typeaheadВизуализировано пользовательское событие
Предложение twitter bootstrap 3 typeaheadВизуализировано пользовательское событие
twitter bootstrap 3 предложения typeaheadВизуализированный обратный вызов
twitter bootstrap 3 предложения typeaheadВизуализировано обратный вызов данных

Наконец... Я нашел ветку на github, в которой говорится, что эта функция была запрошена и ожидает реализации (хотя этот комментарий был 10 месяцев назад).

Anil 15.01.2014 источник

Ответы (2)

arrow_upward
2
arrow_downward

В настоящее время эта функция ожидает реализации (наряду с кучей других обратных вызовов), я нашел простое решение (которое требует редактирования основной библиотеки typeahead.js)

Шаг 1

Внутри typeahead.js найдите следующую строку (приблизительно Line: 840 в v0.9.3).

// Within Class DropdownView
renderSuggestions: function(dataset, suggestions) {
...
    this.trigger("suggestionsRendered"); // Find this line! approx line: 840
...
}

Шаг 2

Измените строку выше на:

renderSuggestions: function(dataset, suggestions) {
...
    this.trigger("suggestionsRendered", suggestions); // Pass "suggestions" var
...
}

Шаг 3

Наконец, на странице HTML (или в файле Javascript) используйте следующее, чтобы прикрепить event:

// When you initialize your typeahead, store it into a variable
$typeahead = $('#your-typeahead-input-id-or-class').typeahead({options});

// Access that elements data property, and attach the event to dropdownView
$typeahead.data('ttView').dropdownView.on('suggestionsRendered', function (evtObj) {
    console.log(evtObj.type); // Holds the event type: "suggestionsRendered"
    console.log(evtObj.data); // Holds results of filtered data: Object
    console.log("suggestionsRendered event callback fired");
    // Do your stuffs..
});

Вот и все!

Если вы зарегистрируете переменную `evtObj`, у вас будет тип события И данные! :)

Anil 15.01.2014

arrow_upward
1
arrow_downward

Я считаю, что этот пример для работы с событиями сейчас более актуален: https://github.com/twitter/typeahead.js/issues/300

Sabrina Leggett 09.04.2014