I want to implement a search with typeahead functionality on my site and followed the instructions here: http://twitter.github.io/typeahead.js/examples/#custom-templates
However, the examples all show the typeahead as text so onclick just fills in the textbox.
What's a best way for me to modify this so that onclick the suggestions actually links to a page for the suggestion? E.g. typeahead returns 3 objects:
What should I do to have object 1..3 returned, and clicking on them takes user to link 1..3?
Write an simple example in http://jsfiddle.net/2RNFj/3/
You just need to provide the objects and supply it to Bloodhound
to set the source of typehead
:
var links = [{name: "abc", link: "http://www.example1.com"},
{name: "nbc", link: "http://www.example2.com"}];
var source = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: links
});
source.initialize();
$('#custom-templates .typeahead').typeahead(null, {
name: 'matched-links',
displayKey: 'name',
source: source.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
'unable to find any Best Picture winners that match the current query',
'</div>'
].join('\n'),
suggestion: Handlebars.compile('<p><a href="{{link}}">{{name}}</a></p>')
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With