I'm testing Twitters typehead.js (with Bloodhound) as an alternative to jQuery autocomplete.
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?
I know this is old but maybe my fixing could help somebody else. I added the following css style and problem solved: