引入数据集后添加 HTML 元素

Question

在Typeahead JS 中，我正在尝试添加一个选项，该选项会在用户开始输入后出现在下拉列表的底部。目前，我正在使用 'onOpened' Custom Event 在初始化 'tt-dropdown-menu' 元素后触发添加一些 HTML。

.on('typeahead:opened', onOpened)
  function onOpened($e) {
    $('.tt-dropdown-menu').html( "<a href="">Add Option</a>" );
}

问题是在初始化下拉列表时添加了 jQuery HTML，正如预期的那样，然后当用户开始输入具有自动完成结果的新数据集元素时，会在该 jQuery HTML 下方添加，因此 jQuery HTML 永远不会出现在下拉菜单的底部。您不能将 jQuery HTML 附加到数据集，因为在初始化下拉列表时该元素不存在。

有没有更简单的方法来解决这个问题？其他自定义事件似乎没有涵盖这种情况。

Answer 1

如果你只有一个dataset，你可以像我一样：将footer 添加到数据集，并将其添加为DOM 元素，而不是纯HTML 字符串。然后，您可以随意更改它（例如在您希望的任何事件上），您的更改会反映在下拉列表中。

例子：

$('#myinput').typeahead({
    // rest of your regular stuff, like 'name', 'remote', etc.
    footer: $('#dropdown-footer'),
});

... 其中dropdown-footer 是div 的ID，你在你的dom 中的某个地方。然后，您可以执行以下操作：

$('#dropdown-footer').html('Hello')