Is there any way to prevent typeahead.js to inject inline styling?

1.4k Views Asked by At

I'm testing Twitters typehead.js (with Bloodhound) as an alternative to jQuery autocomplete.

As per documentation:

Custom Templates

Custom templates give you full control over how suggestions get rendered making it easy to customize the look and feel of your typeahead.

So I use this:

$('#autocomplete-pm').typeahead(null, {
    name: 'Resources',
    display: 'value',
    source: resourcesData,
    templates: {
      empty: [
        '<div class="empty-message">',
        'Ingen resurser funnet',
        '</div>'
      ].join('\n'),
      suggestion: Handlebars.compile('<div data-resource_id="{{resource_id}}"><strong>{{first_name}}</strong> – {{last_name}}</div>')
    }
  });

So I may have full controll over the output list, but the problem is that it wraps the enitre input in a <span> tag:

<span class="twitter-typeahead" style="position: relative; display: inline-block;">

Is there a way to prevent this so it follows my sass styling?

1

There are 1 best solutions below

0
On

I know this is old but maybe my fixing could help somebody else. I added the following css style and problem solved:

.twitter-typeahead{
    display: flex !important;
}