0

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'
}
]);
webber
  • 1,834
  • 5
  • 24
  • 56

1 Answers1

2

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'
}
]);
Travesty3
  • 14,351
  • 6
  • 61
  • 98
  • Thanks! Any idea why does it not partially match the tokens? For example if I enter "ey" it should have matched the "key" tokens. – webber Jan 24 '14 at 05:11
  • The matcher doesn't match tokens that way. It only matches tokens *starting with* the value you've typed. There used to be a way to define a custom matcher, [but the author removed that feature](https://github.com/twitter/typeahead.js/issues/86), claiming that it was "half-baked", and indicated that he planned to add it back in a future release once it's been more thoroughly planned out. – Travesty3 Jan 24 '14 at 05:19
  • any ideas on how to get Hogan to work on Typeahead 0.10+? I tried `Hogan.compile(...)` but it doesn't work. Please see http://stackoverflow.com/questions/24727534/migrating-to-typeahead-0-10-with-hogan if you have a solution. Thx! – isapir Jul 13 '14 at 23:16
  • @Igal: Sorry, I haven't updated my Typeahead version at all. Looks like you found a solution, though :-) – Travesty3 Jul 14 '14 at 12:57
  • @Travesty3 thank you for replying. I updated my solution since Function.prototype.bind() is not supported by older browsers. – isapir Jul 14 '14 at 16:38