twitter typeahead create extra link in dropdown

Question

I'd like to override the default behavior of twitter typeahead.

When a suggestion shows, I'd like to be able to add an <a> or <button> tag, so that when that specific button is clicked, it doesn't do the typical dropdown row submit.

I know how to do templating to render the button/link in a template, but can't figure out how to override the whole row click into an individual button click.

templates: {
  header: '<h3 class="search-set">asdf</h3>',
  suggestion: function(context) {
    return Mustache.render(template, context);
  }
}

Thanks in advance.

Answer 1

Well, you could use the Custom Events triggered by typeahead on a selection.

If you really need a button it's more of a Mustache question really. One solution would be to add the onClick handler to the generated html via jQuery, e.g.

suggestion: function(context) {
  var html = Mustache.render(template, context);
  $('button', html).on('click', function(){alter('something')});
  return html;
}