How do we set remote in Typeahead.js?

In previous versions I could do:

  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:

The code is here:

// Instantiate the Bloodhound suggestion engine
var movies = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '',
        filter: function (movies) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(movies.results, function (movie) {
                return {
                    value: movie.original_title

// Initialize the Bloodhound suggestion engine

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
    // Use 'value' as the displayKey because the filter function 
    // returns suggestions in a javascript object with a variable called 'value'
    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:

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.

Well you can do something like:

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

source: Using Typeahead.js without Bloodhound

If you want to use ajax POST data instead GET data for more controlled ajax calls, you may use this structure:

var meslekler = new Bloodhound({
    datumTokenizer: function (d) {
            return Bloodhound.tokenizers.whitespace(d.isim);
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'my_url_with_or_without_%query_token.php',
$('.typeahead').typeahead(null, {
    displayKey: 'isim',
    source: meslekler.ttAdapter()

Need Your Help

reloadRowsAtIndexPaths:withRowAnimation: crashes my app

iphone uitableview crash

I got a strange problem with my UITableView: I use reloadRowsAtIndexPaths:withRowAnimation: to reload some specific rows, but the app crashes with an seemingly unrelated exception:

How can I delete a Facebook app that I developed?


How can I delete a Facebook app that I developed? I don't see a delete button in my Developer Account console.