Typeahead autocomplete: usings templates

Question

I'm playing with typeahead and I cannot get a simple proof of concept working.

http://jsfiddle.net/LHeYy/

In the code below I'm basically trying to build an autocomplete using 2 fields. The crazy thing is it that I can autocomplete for the year (value field) but not for the key field. Does anyone have any clue why?

$('#inputBox').typeahead([
{
    name: 'best-picture-winners',
    local: [{key: 'some key', value:2014}, {key: 'some key 2', value:2015}, {key: 'some key4', value:2016}],
    template: '<p><strong>{{key}} {{value}}</strong></p>',
    engine: Hogan,
    valueKey: 'value'
}
]);

Answer 1

By default, it only autocompletes against the value property. If you want it to check against other values, set a tokens property that contains an array of single-word tokens.

See https://github.com/twitter/typeahead.js#datum

And here is your fiddle, updated: http://jsfiddle.net/LHeYy/1/

$('#inputBox').typeahead([
{
    name: 'best-picture-winners',
    local: [
        {key: 'some key', value: 2014, tokens: ['some', 'key']},
        {key: 'some key 2', value: 2015, tokens: ['some', 'key', '2']},
        {key: 'some key4', value: 2016, tokens: ['some', 'key4']}
    ],
    template: '<p><strong>{{key}} {{value}}</strong></p>',
    engine: Hogan,
    valueKey: 'value'
}
]);