prefetch가있는 bloodhound가 0.10으로 작동하지 않습니다.

Question

저는 typeahead.js 0.10을 작동시키려는 몇 가지 시도를 이미했고 로컬 데이터 세트에서만 작동하도록 만들었습니다.

프리 페치 또는 원격 옵션을 사용하는 경우 예제 페이지 다음에 나오는 경우에도 작동하지 않습니다. 어느 쪽이든 json 파일을 잘못된 구문으로 포맷하거나 bloodhound 옵션을 엉망으로 만들고 있습니다.

솔직히 "datumTokenizer : function (d) {return Bloodhound.tokenizers.whitespace (d.value);}"는 실제로 무엇을합니까? 공백을 의미하는 것은 무엇입니까 ...

글쎄, 나는 여기에 내 현재 예제를 남겨두고 누군가가 이것을 어떻게 사용하는지 이해하도록 도울 수 있다고 생각한다.

가능하면 json 파일 예제와 함께 필터 옵션을 사용하여 Bloodhound에 예제를 추가 할 수 있습니까?

JSON 파일

 [ 
{ 
    "year": "1961", 
    "value": "Test Side Story", 
    "tokens": [ 
    "West", 
    "Side", 
    "Story" 
    ] 
}, 
{ 
    "year": "1962", 
    "value": "Tawrence of Arabia", 
    "tokens": [ 
    "Lawrence", 
    "of", 
    "Arabia" 
    ] 
}, 
{ 
    "year": "1963", 
    "value": "Tom Jones", 
    "tokens": [ 
    "Tom", 
    "Jones" 
    ] 
}, 
{ 
    "year": "2012", 
    "value": "Argo", 
    "tokens": [ 
    "Argo" 
    ] 
} 

]

선행 입력 0.10 스크립트

 <script> 
var films = new Bloodhound({ 
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); }, 
queryTokenizer: Bloodhound.tokenizers.whitespace, 
prefetch: 'http://localhost/dh/js/films.json' 
}); 

films.initialize(); 

$('#cenas0').typeahead(null, { 
displayKey: 'value', 
source: films.ttAdapter(), 
templates: { 
suggestion: Handlebars.compile(
'<p><strong>{{value}}</strong> – {{year}}</p>' 
) 
} 
}); 
</script> 

(일부 스크립트 선언과) HTML 코드

 <script type="text/javascript" src="http://localhost/dh/js/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="http://localhost/dh/js/typeahead.bundle.js"></script> 


<input id="cenas0" class="typeahead" placeholder="cenas0"></input> 

Answer 1

가 나는 확신 이상하게 그 충분하게 그것은 단순히 div 래퍼 귀하의 입력 주위에 추가하는 다음 코드를 사용하는 경우 html divs 및 클래스 delcaration 함께 할 todo있다 (잘 jquery 1.9.1, 가장 최근의 번들 jquery를 사용하는 것)

html

<div class="films"> 
<input class="typeahead" name="film" type="text" autocomplete="off" value=""> 

    </div> 

JS 코드 (I 중단 일부만 핸들이었다) 여기서

var films = new Bloodhound({ 
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    limit: 10, 
    prefetch: "js/films.json" 


    }); 

    films.initialize(); 

    $('.films .typeahead').typeahead(null, { 

    displayKey: 'value', 
    source: films.ttAdapter() 

    }) 


}); 

로컬 저장소 http://jsfiddle.net/qLk8c/