Как инициализировать typeahead.js

Question

Я действительно смущен документами для typeahead.js, поэтому я решил задать здесь. Я пытался использовать пример typahead.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-номер» является классом для текстового поля и «.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() 
});