How do we set remote in Typeahead.js?

Question

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?

Answer 1

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.

---

Update for Typeahead 0.11.1

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:

• The "filter" function has been renamed to "transform".
• No need to call initialize on the Bloodhound object, nor do we need to call ttAdapter() when assigning it to the remote source.
• Now need to specify the wildcard (e.g. %QUERY) within the remote options hash.

Answer 2

Well you can do something like:

$('input#keywords').typeahead({     highlight: true, }, {   name: 'brands',   display: 'value',   source: function(query, syncResults, asyncResults) {     $.get('/search?q=' + query, function(data) {       asyncResults(data);     });   } }) 

source: Using Typeahead.js without Bloodhound