선행 기입 제어가 작동하지 않습니다.

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에 'value'키가있는 JSON 객체가 있습니까? 그렇지 않으면 데이텀이 파싱되지 않으므로 Typeahead는 제안 사항을 표시하지 않습니다.

또한 Typeahead 인스턴스가 올바르지 않습니다 (설명서는 here 참조). "options"객체가 누락되었습니다 (기본값에 만족하는 경우 null을 전달). 또한 datasets 배열 매개 변수에 "displayKey"값이 없습니다. Typeahead에게 추천 값으로 사용할 것을 알려줍니다. 따라서, 당신은해야합니다

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

원격 데이터 소스를 사용하여 Typeahead.js의 전체 작업의 예를

는 here을 찾을 수 있습니다.

Answer 2

여러 클래스 ID를 가지고 있기 때문에 jQuery가 트리거되지 않는다고 생각합니다. (아래 그림 참조) 시도 또는

class="typeahead" 

에

class="form-control typeahead tt-query" 

에서 변경, 나는 그것의 의심하여 ​​jQuery를에서 '입력'을 제거

$('.typeahead').typeahead({ 

Answer 3

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