CODEWITHSUNDEEP
javascripttwitter-bootstrap
Yuko Takegoshi
Yuko Takegoshi

Reputation: 21

Dynamically populating Twitter Bootstrap Typeahead

Typeahead works if I give a static array as the source, but when I try to generate the array with function it won't populate its dropdown list.

$("#mix-artist" ).typeahead({
        source: function(query, process) {
            Mix.searchArtist(query);
        },          
        minLength: 3,
    });

The function for the source:

searchArtist: function(query) {
    $.get(API_MAIN_URL, {a: "search.artists", q: query}, 
        function(data) {
            artists = [];
            query = query.toLowerCase();
            if (data['aData']) {
                for (var i = 0; i <= data['aData'].length; i++) {
                    if (data['aData'][i] && data['aData'][i]['sName'].toLowerCase().indexOf(query) == 0) {
                        artists.push(data['aData'][i]['sName']);
                    }
                }
            }
            console.log(artists);
            return artists;
        });
}

Sample output of the source function:

["Arcangel", "Arc Angels", "Arcade Fire", "Arctic Monkeys", "Archers of Loaf", "Architecture in Helsinki", "Archie Shepp", "Arcade", "Arch Enemy", "Arcadia", "Archie Eversole"]

What can I do to get typeahead to accept this array?

Upvotes: 1

Views: 940

Answers (1)

Daniel Moses
Daniel Moses

Reputation: 5858

You need your searchArtist function to take the process callback. Instead of returning the array you should call process(artists).

Upvotes: 2

Related Questions