Geek asks and answers

Problem creating custom source using typeahead.js

I am trying to use a user source (remote) with typeahead.js and am a little worried about how to work correctly. If I hardcode the data, everything works fine, but when I try to implement a call to a remote service, that call is never called and thus never retrieves data to fill typeahead.

Here is 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 with a name resultsand manually structure the data and pass it to cb, everything will work fine. However, this implementation is $.getJSONnever called. What am I missing?

Thank!

+3
source share
3 answers

, , $.getJSON. , , , (url, [data], [success]). .

!

+1

, typeahead.js . URL pageload, localStorage

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

"" ? :

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

, headhead "source", "local".

0

,

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

asyncrouniuous

$.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");
    }
});

this

I also like selectize.js library which has rich api, try

0
source

More articles:


All Articles