Using Twitter's typeahead.js - calling my WebAPI, how to fill the drop down list in my typeahead input text box?

Question

This is my first time using Twitter's typeahead.js. I've got parts of it working, but what's not working is when I type ahead, the drop down list under the input text box is supposed to fill with values, but instead for me it says "undefined".

Here's my client-side code:

$(document).ready(function () {
    $('input.typeahead-devs').typeahead({
        name: 'movies',
        remote: {
            url: 'http://localhost:61182/api/SixFilm/GetMovies?term=%QUERY',
            dataType: 'json',
        }
    });
});

The URL in the code above works and returns valid JSON. Here's my UI and my Firebug output:

I have a feeling I'm getting "undefined" because my "typeahead" doesn't know what to put for the values in the drop down list. Is there a particular variable I'm missing in my .typeahead call? How would I construct my typeahead correctly so that I get values in my drop down list?

Answer 1

I solved my problem. I needed valueKey. valueKey in my example is "Name", which is what I want to populate the drop down list:

$(document).ready(function () {
    $('input.typeahead-devs').typeahead({
        name: 'movies',
        remote: {
            url: 'http://localhost:61182/api/SixFilm/GetMovies?term=%QUERY',
            dataType: 'json',
        }
        valueKey: "Name",
    });
});