Twitter Typeahead with template always return only 1 row of data

Question

I am trying to make a similar example as what Twitter show on the examples page, more specifically the one with the template named Open Source Projects by Twitter and I got some

Answer 1

After couple days of working on this after working hours, I finally found it... I forgot 1 little thing that now answers my both problems. I had forgotten this little piece of code in my JS: valueKey: 'symbol' and voila!!! That is why I couldn't see anything in the input even after I selected the only row that was showing (my problem #2) and also why it was showing only 1 row of suggestion. Now for a cleaner code I came up with this:

$('.symbols .typeahead').typeahead({
    limit: 5,
    valueKey: 'symbol',
    remote: {
        url: 'yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY',
        filter: function(parsedResponse) {
            return parsedResponse.data;
        }
    },
    template: [
        '<p class="symbols-exchange">{{exchDisp}}</p>',
        '<p class="symbols-symbol">{{symbol}}</p>',
        '<p class="symbols-name">{{name}}</p>'
    ].join(''),
    engine: Hogan
});