Javascript 如何初始化typeahead.js

我真的对typeahead.js的文档感到困惑，所以我决定在这里提问。我在我的机器上尝试typeahead.js的示例，但它不起作用

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()
});

我假设类“.example numbers”是文本框的类，.typeahead”是结果的类。我很难让这个工作和任何示例代码是赞赏。我还将typeahead.js文件包括在我的项目中。

以及上面的代码

确保您正在使用jQuery 1.9+并包含必要的资源：

HTML

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

---

你有JSFIDLE或其他东西让我们看看吗？很抱歉，我知道我的代码没有多少余地。我真的被医生弄糊涂了

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()
});