How to initialize typeahead.js

Question

I'm really confused with the docs for typeahead.js so I decided to ask here. I was trying typeahead.js' example on my machine and it wasn't working.

var numbers = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
  { num: 'one' },
  { num: 'two' },
  { num: 'three' },
  { num: 'four' },
  { num: 'five' },
  { num: 'six' },
  { num: 'seven' },
  { num: 'eight' },
  { num: 'nine' },
  { num: 'ten' }
  ]
});

// initialize the bloodhound suggestion engine
numbers.initialize();

// instantiate the typeahead UI
$('.example-numbers .typeahead').typeahead(null, {
  displayKey: 'num',
  source: numbers.ttAdapter()
});

I am assuming that the class ".example-numbers" is the class for the textbox and ".typeahead" for the results. I am having trouble getting this to work and any example code is appreciated. I've also included the typeahead.js file in my project.

Answer 1

Here's a fiddle where I have it working with your code above.

Make sure you're using jQuery 1.9+ and including the necessary resources:

• Their Example CSS
• typeahead.bundle.min.js

HTML

<input id='myTextBox' class='typeahead' placeholder='numbers (1-10)' type='text' />

JS - for completion sake, but shouldn't be different that what you posted

var numbers = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: [
    { num: 'one' },
    { num: 'two' },
    { num: 'three' },
    { num: 'four' },
    { num: 'five' },
    { num: 'six' },
    { num: 'seven' },
    { num: 'eight' },
    { num: 'nine' },
    { num: 'ten' }
  ]
});

// initialize the bloodhound suggestion engine
numbers.initialize();

// instantiate the typeahead UI
$('#myTextBox').typeahead(null, {
  displayKey: 'num',
  source: numbers.ttAdapter()
});