It took me a while to get it working, your right, there's not allot of info on the new 0.10 version. Here's how I lookup people from my database in javascript:
//FirstName Search Engine
var firstNameTypeahead = new Bloodhound({
datumTokenizer: function (d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'https://api.example.com/v1/people?firstname=%QUERY',
filter: function ( response ) {
return $.map(response.people, function (object) {
return {
value: object.firstname + " " + object.lastname + " - Student ID: " + object.externaluuid,
firstName: object.firstname,
lastName: object.lastname,
personID: object.id
};
});
}
}
});
firstNameTypeahead.initialize();
//instantiate the typeahead UI for First Name Lookup
$('#firstNameSearch').typeahead(null, {
minLength: 3,
displayKey: 'value',
source: firstNameTypeahead.ttAdapter()
}).on('typeahead:selected', function (object, datum) {
displaySelectedStudent(object, datum);
});
Pay special attention to the filter section, that's how typeahead knows how to read your server response... in this case the map function lets it know that response.people is where to find the data it needs in the JSON response....but of course you can modify this to your needs.
You use value to display it right? where are firstName, lastName and personID used then?
I don't understand a whole lot when it comes to typeahead.js to be honest!
i was looking for the same thing but i simply lost in the above example ,anyway check the below Gist which should get u going https://gist.github.com/ctf0/cd1a0eba0e99e92454c0
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community