Twitter Typeahead не работает с вводом, созданным динамически

Я использую Twitter Typeahead для автозаполнения ввода текста.

Когда я создаю ввод динамически, .typeahead() не отображает пользовательский интерфейс подсказки, если только он не вызывается после присоединения элемента управления вводом к DOM.

Это работает:

var input1 = $('<input type="text" />');
$("#dynamic-container1").append(input1); /* (A) */
input1.typeahead(null, make_dataset());  /* (B) */
input1.focus();

Это не:

var input2 = $('<input type="text" />');
input2.typeahead(null, make_dataset());  /* (B) */
$("#dynamic-container2").append(input2); /* (A) */
input2.focus();

(Обратите внимание на порядок строк, отмеченных (A) и (B).)

Почему это происходит? Есть ли правильный способ инициализировать Typeahead до того, как его ввод будет добавлен в DOM?

Вот скрипт: http://jsfiddle.net/joz0fn3m/


html jquery typeahead.js twitter-typeahead
person Alexander Gladysh    schedule 30.03.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны добавить input2.parent() вместо просто input2. Потому что typeahead — это не просто элемент ввода, а структура, как показано ниже. Просто добавляя ввод, typeahead пропускает необходимую структуру.

<span class="twitter-typeahead">
  <input type="text" class="tt-hint" readonly="" autocomplete="off" spellcheck="false" tabindex="-1" style="..." >
  <input type="text" class="tt-input" autocomplete="off" spellcheck="false" dir="auto" style="...">
  <pre aria-hidden="true" style="..."></pre>
  <span class="tt-dropdown-menu" style="...">
    <div class="tt-dataset-1">
    </div>
  </span>
</span>

Вот обновленная DEMO

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

person Dhiraj    schedule 01.04.2015