如何初始化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() 
}); 

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

Answer 1

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

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

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

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