Элегантный элемент управления не работает

Question

Я пытаюсь использовать typeahead.js. Мой код выглядит следующим образом:

<input id="query" type="search" class="form-control typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Search by typing anything" /> 

... 

var URL_ROOT = '[populated on server. Something like "http://localhost:8080"]'; 
var suggestions = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: URL_ROOT + '/api/suggestions?querytext=%QUERY' 
}); 
suggestions.initialize(); 

$(document).ready(function() { 
    $('input.typeahead').typeahead({ 
    source: suggestions.ttAdapter() 
    }); 
}); 

При загрузке страницы, я не видеть ошибки в окне консоли. Когда я печатаю, я не вижу никаких запросов на сервер в Fiddler. Я бы ожидал, когда я набрал, чтобы запросы были сделаны на сервер, чтобы найти предложения. Что я делаю не так?

Answer 1

Я подозреваю, что это потому, что ваш экземпляр Bloodhound не знает, как бороться с удаленным источником данных, который вы его кормите.

В:

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value') 

вы указали 'значение'. Пропускает ли JSON объекты JSON с ключом «значение»? Если данные не будут проанализированы, и поэтому Typeahead не будет показывать никаких предложений.

Также ваш экземпляр Typeahead не совсем прав (см. here для документации). Вам не хватает объекта «options» (передайте null, если вы довольны значениями по умолчанию). Кроме того, в параметре массива наборов данных отсутствует значение «displayKey»; это говорит Typeahead, что использовать в качестве значения предложения. Следовательно, вы должны иметь:

$('input.typeahead').typeahead(null,{ 
    source: suggestions.ttAdapter(), 
    displayKey: 'value' }); 

Полный рабочий пример Typeahead.js с использованием удаленного источника данных можно найти here.

Answer 2

Я чувствую, что jQuery даже не запускается, поскольку у вас есть несколько идентификаторов классов. Попробуйте изменить его из

class="form-control typeahead tt-query" 

в

class="typeahead" 

В качестве альтернативы, попробуйте удалить 'вход' из JQuery (как показано ниже)

$('.typeahead').typeahead({ 

Answer 3

$('input.typeahead').typeahead(null,{ 
    source: suggestions.ttAdapter() 
});