Typeahead only shows 1 row even if there are more rows

I'm trying to implement Typeahead in my site app but found some issues so far. The first thing is about the records I've sent from server-side to typeahead, even I get more than one row, it only shows one row.

My environment is:

  • Node.JS;
  • Express with Jade Template Engine;
  • Bootstrap
  • MongoDB.

On server-side I add every row the mongo fetches on output array:

        docs.forEach(function(e) {
            output.push({
                _id:e._id,
                name:e.name,
                date:e.dates[0].date.toString('dd/MM/yyyy'),
                type: 'Show',
                desc:S(e.description).stripTags().s
            })
        });

Sent it as JSON to typeahead as well:

$('#header-search').typeahead({
    remote: '/layoutSearch?value=%QUERY',
    template:
        '<table style="width: 400px;"><tr><td><strong>{{name}}</strong></td><td style="float: right">{{date}} - <em>{{type}}</em></td></tr></table>' +
        '<p style="line-height: 100%; font-size: 11px">{{desc}}</p>'
    ,
    engine: Hogan,
    onselect: function(obj) {
        console.log('Selected: ' + obj);
    }
});

My "header-search" code (Jade):

input#header-search.typeahead(type='text', placeholder='Search...', data-provide='typeahead', data-items='4')

Found somewhere "data-items" and added it but nothing changed and also "data-provide", even name field is specified in typeahead options. My query is OK, returns exactly the existing documents.

Any suggestion will be very welcome.

I think you need this:

valueKey – The key used to access the value of the datum in the datum object. Defaults to value.

So try this:

$('#header-search').typeahead({
    remote: '/layoutSearch?value=%QUERY',
    valueKey: 'name',
    template:
        '<table style="width: 400px;"><tr><td><strong>{{name}}</strong></td><td style="float: right">{{date}} - <em>{{type}}</em></td></tr></table>' +
        '<p style="line-height: 100%; font-size: 11px">{{desc}}</p>'
    ,
    engine: Hogan,
    onselect: function(obj) {
        console.log('Selected: ' + obj);
    }
});

Hope it helps!