在引入数据集后添加 HTML 元素 [英] Adding HTML element after the dataset is brought in

问题描述

在 Typeahead JS 中，我试图添加一个出现在底部的选项用户开始输入后的下拉菜单.目前我正在使用 'onOpened' 自定义事件来触发添加一些 HTML'tt-dropdown-menu' 元素已初始化.

In Typeahead JS I'm trying to add an option that appears at the bottom of the dropdown after the user has started typing. Currently I'm using the 'onOpened' Custom Event to trigger adding some HTML after the 'tt-dropdown-menu' element is initialised.

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

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

The problem is that the jQuery HTML is added when the dropdown is initialised, as expected, then when the user starts typing the new dataset element with the autocomplete results in is added below that jQuery HTML so the jQuery HTML can never appear at the bottom of the dropdown. You can't append the jQuery HTML to the dataset either as that element doesn't exist when the dropdown is initialised.

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

Is there an easier way around this? The other Custom Events don't seem to cover this scenario.

推荐答案

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

If you only have one dataset, you can do as I do: add a footer to the dataset, and add it as a DOM element, not plain HTML string. You can then change it at will (say on any event you wish) and your changes are reflected in the dropdown.

示例:

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

... 其中 dropdown-footer 是您在 dom 中某处的 div 的 ID.然后，您可以执行以下操作:

... where dropdown-footer is the ID of a div you have somewhere in your dom. You can then do things like:

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

这篇关于在引入数据集后添加 HTML 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！