CODEWITHSUNDEEP
jquerytypeahead.js
davidpauljunior
davidpauljunior

Reputation: 8338

Switching from jQuery autocomplete to Twitter Typeahead

I have some code that uses the autocomplete jquery plugin, with the source as a json file that is generated dynamically.

funderInput.autocomplete({
    //Look up funders by name and show suggestions
    source:function(request, response) {
        $.getJSON("/funder/suggest?name=" + request.term, function(data){
            response($.map(data.result.suggestions, function(item, index) {
                return {label: item.name + " (" + item.location + ")", value: item.fundref};
            }))
        })
    }
});

I can't work out how to do something similar in Typeahead. The examples in the documentation suggest the following, but seem use a static JSON file.

var bestPictures = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '../data/films/post_1960.json',
  remote: '../data/films/queries/%QUERY.json'
});

bestPictures.initialize();

$('#remote .typeahead').typeahead(null, {
  name: 'best-pictures',
  displayKey: 'value',
  source: bestPictures.ttAdapter()
});

I tried this, but not really getting far!

defaults.typeahead.typeahead({
    // Options
    minLength: 1,
    highlight: true,
}, {
    // Dataset
    source: function (query, process) {
        $.getJSON("/funder/suggest?name=" + query, function (data) {
            response($.map(data.result.suggestions, function (item, index) {
                return {
                    label: item.name + " (" + item.location + ")",
                    value: item.fundref
                };
            }))
        });
    }
});

I'm a JavaScript novice so a gentle kick in the right direction is what I'm after if possible.

Upvotes: 0

Views: 213

Answers (1)

SSA
SSA

Reputation: 5493

in typeahead function is called process instead of response. Try with returning process

source: function (query, process) {
        $.getJSON("/funder/suggest?name=" + query, function (data) {
           return  process($.map(data.result.suggestions, function (item, index) {
                return {
                    label: item.name + " (" + item.location + ")",
                    value: item.fundref
                };
            }))
        });
    }

Upvotes: 1

Related Questions