In previous versions I could do:
$('#search').typeahead({
name: 'Search',
remote: '/search?query=%QUERY'
});
But since the 0.10 update, typeahead.js is asking us to define source which I cannot make to work. How do I define remote without having to define a dataset function?
Typeahead.js version 0.10.0 now uses a separate component called a suggestion engine for providing the suggestion data. The suggestion engine which ships with Typeahead.js is called Bloodhound.
Hence you cannot define remote without having to define a dataset function.
An example of this working with a remote data source (I'm querying the TheMovieDb API, try searching for Aliens for example) can be found here:
http://jsfiddle.net/Fresh/UkB7u/
The code is here:
// Instantiate the Bloodhound suggestion engine
const movies = new Bloodhound({
datumTokenizer: datum => Bloodhound.tokenizers.whitespace(datum.value),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=f22e6ce68f5e5002e71c20bcba477e7d',
// Map the remote source JSON array to a JavaScript object array
filter: movies => $.map(movies.results, movie => ({
value: movie.original_title
}))
}
});
// Initialize the Bloodhound suggestion engine
movies.initialize();
// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
displayKey: 'value',
source: movies.ttAdapter()
});
Note how the filter function allows you to choose what you want to use as a typeahead suggestion from a non-trivial JSON data source.
For those that are using the newer version of typeahead, a working example based off the original question can be found here:
http://jsfiddle.net/Fresh/bbzt9hcr/
With respect to Typeahead 0.10.0, the new version (0.11.1) has the following differences:
