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

我假设类“.example-numbers”是文本框的类，而“.typeahead”是结果。我无法让这个工作，任何示例代码都受到赞赏。我还在项目中包含了typeahead.js文件。

Answer 1

Here's a fiddle where I have it working上面的代码。

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

<强> HTML

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

如何初始化typeahead.js

1 个答案: