Twitter Typeahead with template always return only 1 row of data

问题

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 something partially working but it only and always show just 1 row of result even though I set it to be 10, I am pulling Yahoo Finance data and the result are JSON and is valid inside Firebug, for example typing letter "a" will make a similar JSON Object of: [Object { symbol="A", name="Agilent Technologies Inc.", exch="NYQ", more...}, Object { symbol="^DJI", name="Dow Jones Industrial Average", exch="DJI", more...}, more objects...]

My JS file has this typeahead setup

$('.symbols .typeahead').typeahead({
    //name: 'symbols',
    //remote: 'yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY',
    limit: 3,
    remote: {
        url: 'yahoo_autocomplete_ajax.php?action=autocjson&symbol=%QUERY',
        filter: function(parsedResponse) {
            var dataset = [];

            dataset = parsedResponse.data;
            console.log(parsedResponse.data);
            console.log(dataset); // debug the response here

            return dataset;
        }
    },
    //prefetch: 'symbols.json',
    template: [
        '<p class="symbols-exchange">{{exchDisp}}</p>',
        '<p class="symbols-symbol">{{symbol}}</p>',
        '<p class="symbols-name">{{name}}</p>'
    ].join(''),
    engine: Hogan
});

With the console.log of both parsedReponse.data and dataset are both showing a valid array. but at the end it still always show the first result no matter what and the template is working like it should it seems, now in my HTML code I have the examples from Twitter running and it always show all results, but mine just 1..so why? If needed, I can also post my HTML code, I'm only trying to make the example, so the HTML is still simple

I also have a 2nd problem when it's showing that 1 result even if I click on it to choose it, nothing shows up in my input, though I would like to have the symbol value

Here is portion of my HTML code

<form>
        <div class="example symbols">
            <h2 class="example-name">Symbols</h2>
            <p class="example-description">Defines a custom template and template engine for rendering suggestions</p>

            <div class="demo">
                <input class="typeahead" type="text" placeholder="symbol">
            </div>
        </div>
    </form>

回答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
});

来源：https://stackoverflow.com/questions/18009249/twitter-typeahead-with-template-always-return-only-1-row-of-data

标签

typeahead.js