Adding HTML element after the dataset is brought in

问题

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>" );
}

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.

回答1:

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.

Example:

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

... 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')

来源：https://stackoverflow.com/questions/18109882/adding-html-element-after-the-dataset-is-brought-in