Trouble implementing a custom source with typeahead.js

Question

I'm trying to use a custom source (remote) with typeahead.js, and having a bit of trouble getting things to work correctly. If I hard code the data, things work fine, but when I try to implement a call to a remote service, that call is never invoked, and thus, never retrieves the data to populate the typeahead.

Here's the code:

var places = function(query, cb){
    $.getJSON({
        url: "https://api.foursquare.com/v2/venues/search?v=20120321&intent=global&query=%QUERY&client_id="+App.fs.client_id+"&client_secret="+App.fs.client_secret,        
        success: function(results){
            cb(results.response.venues);
        },
        error: function(){
             console.log("error");
        }
    });
};

$("#search").typeahead({
        highlight: true
    },
    {
        name: "Places",
        displayKey: "name",
        source: places
    }
);

If I create an object called results and manually structure the data, and pass that to cb, things work fine. However, with this implementation, $.getJSON is never even called. What am I missing?

Thanks!

Im guessing the link is not working properly. have you tried manually checking the link if it returns a JSON data? — rockStar, Feb 14 '14 at 15:12

score 1 · Answer 1 · answered Feb 14 '14 at 15:43

As it turns out, the problem was in how I implemented $.getJSON. I'd thought the signature for that function was a hash of options, but it's not, it's actually (url, [data], [success]). Changing that to the correct signature makes things work.

Thanks for all the quick responses!

bcollins · Answer 2 · 2014-02-14T15:18:49.577

Note that with typeahead.js you don't have to manually load your data. Using a prefetch URL will grab data on pageload and then stored in localStorage

$('#input').typeahead([
{
    name: 'places',
    prefetch: four_square_url_query,
}
]);

Isn't "places" in your example a function? What about:

var places;
 $.getJSON({
        url: fsquare_query,        
        success: function(results){
            places = results.response.venues;
        },
        error: function(){
             console.log("error");
        }
    });

I believe the most recent typeahead does not have a "source" property, rather it has "local".

score 0 · Answer 3 · edited May 23 '17 at 11:43

I think you can do it in this way

var search = $("#search").typeahead({
    highlight: true,
    source: []
};

Now you can use asyncrouniuous request to fetch data from server

$.getJSON({
    url: "https://api.foursquare.com/v2/venues/search?v=20120321&intent=global&query=%QUERY&client_id="+App.fs.client_id+"&client_secret="+App.fs.client_secret,        
    success: function(results){
        // some logic to filter, process results from server
        // now you can directly update typeahead source
        search.data('typeahead').source = results; 
    },
    error: function(){
         console.log("error");
    }
});

Trouble implementing a custom source with typeahead.js

3 Answers3