Question

我使用Twitter Typeahead为我的文字输入提供自动完成功能。

当我动态创建输入时，.typeahead()不会显示提示UI，除非在将输入控件附加到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)的行的顺序。）

为什么会这样？是否有正确的方法在将输入附加到DOM之前初始化Typeahead？

这是一个小提琴：http://jsfiddle.net/joz0fn3m/

Answer 1

您必须附加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

希望这有帮助

Twitter Typeahead不适用于动态创建的输入

1 个答案: