2

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.

Ito
  • 2,167
  • 3
  • 23
  • 32

2 Answers2

6

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!

Hieu Nguyen
  • 8,563
  • 2
  • 36
  • 43
0

If you're using Bloodhound as an engine, I think adding valueKey won't solve the issue, but this solution seems to work:

Typeahead.js / Bloodhound display just one result

This worked for me.

Community
  • 1
  • 1