How Do We Set Remote in Typeahead.Js

How do we set remote in Typeahead.js?

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.

Bloodhound / typeahead : using remote with simple strings

Use bloodhound's filter method like this

filter: function(data) {
  return $.map(data, function(item) {
    return {
      'value': item
    };
  });
}

Bloodhound object should looks like this

var dataSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: "http://output.jsbin.com/cajebe/1.json",
        filter: function(data){
            return $.map(data, function(item){
                return {'value' : item};
            });
        }
    }
});

PS: The data from the server should be of JSON format

Here is a demo http://jsfiddle.net/dhirajbodicherla/pegp21r7/35/

---

update

Typeahead is missing correct parameters. It should be

typeaheadjs: [ {options}, {datasets} ]

$('#txtAutoSearchBox').typeahead(null, { // <--- missing this null
    items: 4,
    displayKey: 'value',
    source: suggestions.ttAdapter()
});

twitter typeahead.js autocomplete remote not working

I can see two problems:

1) Your script declaration is missing a type attribute:

<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.js"></script>
<script type='text/javascript' src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

add "type='text/javascript'" to the script declarations for jquery and bootstrap.

A more modern way of declaring your script tags can be found here.

2) To initialise Typeahead you need to place the code into your jQuery ready method i.e.

$(function(){
 var stocks = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 5,
    remote: {
        url: "/search/autocomplete/",
        replace: function(url, query) {
            return url + "?q=" + query;
        },
        filter: function(stocks) {
            return $.map(stocks, function(data) {
                return {
                    tokens: data.tokens,
                    symbol: data.symbol,
                    name: data.name
                }
            });
        }
    }
});
stocks.initialize();
$('.typeahead').typeahead(null, {
        name: 'stocks',
        displayKey: 'name',
        minLength: 1, // send AJAX request only after user type in at least X characters
        source: stocks.ttAdapter()
    }); 
});

As it is currently the typeahead code wont get loaded.

Typeahead: Setting HTTP GET headers for the Bloodhound remote option?

So, I found this out myself. It's very simple, really, though the documentation doesn't seem to clear about it.

The prepare function takes the settings object as an argument. This settings object seems to be a jquery ajax options object. At least it worked when I tried to apply the standard parameters from the jQuery documentation :)

---

Related Topics