Feature Request - Support for typeahead templates

[AndrewCarterUK]

Hello,

Love the plugin. Just putting in a feature request as I've just realised support was missing for typeahead templates. I'm guessing the plugin has been updated since this project was created.

All the best,

Andrew

[gandarez]

+1

[swils]

Actually, you can use complex HTML templates in displayText. You just need to set the highlighter option to the identity function. (E.g. "displayText: myFancyFormatterFunc, highlighter: Object")

You can also use the updater option to process the selected item into whatever you really want it to be.

[coclav]

I'm not sure how to implement what @swils suggests but here is how i have done it :+1: just after i.find('a').html(that.highlighter(text, item)); (in render, line 272 in my version) I have added the code to customize the render the item i

for me it was fairly simple:

i.find('a').html(that.highlighter(text, item));
if( item.htmlcolorcode ) {
  i.css({"background-color":item.htmlcolorcode});
}

[shooftie]

@swils , I've seen your response in another issue and am having trouble implementing it.

I am able to format the actual dropdown as intended:

However, the HTML itself is being returned as the chosen result:

Rather than edit the source as @coclav has, my options are thus:

var $input = $(".typeahead");

$input.typeahead({
  source: [
    {id: "itemID1", name: "City 1", family: "Country 1"},
    {id: "itemID2", name: "City 2", family: "Country 2"}
  ],
  autoSelect: true,
  displayText: function (item) {
    return item.name + '<span class="dropdown-item-extra">' + item.family + '</span>'
  }
});

I've made a fiddle, I would be grateful if you could steer me right.

[swils]

@coclav @shooftie here's a (slightly edited) example from working production code. I think you still need to add an afterSelect:

var template = _.template('<span class="fancy-autocomplete">${id}: ${name}</span>');
$input.typeahead({
  minLength: 2,
  source: function(value, handleResults) {
    $.getJSON('/autocomplete', { id: value }, handleResults);
  },
  highlighter: Object,  // Make it possible for displayText to be HTML.
  displayText: template,
  afterSelect: function(item) {
    $input.val(item.id).change();
  }
});

https://jsfiddle.net/wmtx0dqm/4/

[shooftie]

Ah ha, the missing link. @swils you are a good man!

Many thanks.

[iradofurioso]

The example is not so good but the jsfiddle here works like a charm!!

https://jsfiddle.net/wmtx0dqm/4/

Just an observation the:

afterSelect: function(item) { $input.val(item.name).change(); }

item is not an object the correct is:

afterSelect: function(item) { $("#"+idInput).val(item).change(); }

[mantadiver]

I programmed based on your information. Thank you. Based on the last exemple I use displayText, highlighter and following afterselect. After that my search works fine but the highlight: true does not work anymore. How would I resolve this? I tried out the mark.js and before that the highlighter with html. Maybe somebody can help me with a jsfiddle as above?

[atlasbioinfo]

This has been solved the select of mouse click, but not solve the keyboard selection. That is, if you press "↑" or"↓", the HTML markup will still be displayed. I have a very stupid but effective supplement :). That is, with "Spaces".=-=! The following: return item.name + '<span class="dropdown-item-extra">' + item.family + '</span>' Change to: return item.name + ' {{Here add a lot of space}}<span class="dropdown-item-extra">' + item.family + '</span>' It's funny, but it works =-=.

If the keypress problem can be solved later, it will be better to =-=.

[atlasbioinfo]

This has been solved the select of mouse click, but not solve the keyboard selection. That is, if you press "↑" or"↓", the HTML markup will still be displayed. I have a very stupid but effective supplement :). That is, with "Spaces".=-=! The following: return item.name + '' + item.family + '' Change to: return item.name + ' {{Here add a lot of space}}' + item.family + '' It's funny, but it works =-=.

If the keypress problem can be solved later, it will be better to =-=.

Add mouse clicks to make the user experience more user-friendly: $input.mousedown(function(){ let tsp=$input.val().split(" ",2); $input.val(tsp[0]+" "+tsp[1]); });