How do we set remote in Typeahead.js?

问题

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?

回答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
var movies = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e',
        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
movies.initialize();

// 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:

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.

回答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

回答3:

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',
        ajax:{
            type:"POST",
            cache:false,
            data:{
                limit:5
            },
            beforeSend:function(jqXHR,settings){
                settings.data+="&q="+$('.tt-input').typeahead('val');
            },
            complete:function(jqXHR,textStatus){
            meslekler.clearRemoteCache();
            }
        }
    }
});
meslekler.initialize();
$('.typeahead').typeahead(null, {
    name:'meslekler',
    displayKey: 'isim',
    source: meslekler.ttAdapter()
});

来源：https://stackoverflow.com/questions/21530063/how-do-we-set-remote-in-typeahead-js

标签

javascript

autocomplete

remote-server

typeahead

typeahead.js