如何初始化typeahead.js

Question

我真的对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()
});

我假设“.范数”类是textbox的类，".typeahead“是结果的类。我有困难，使这个工作，任何示例代码都是赞赏的。我还在我的项目中包含了typeahead.js文件。

Answer 1

上面的代码是这是我让它工作的小提琴。

确保您使用的是jQuery 1.9+，并包括必要的资源：

• 他们的例子CSS
• typeahead.bundle.min.js

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

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
$('#myTextBox').typeahead(null, {
  displayKey: 'num',
  source: numbers.ttAdapter()
});