2014-10-02 2 views
0

소스 코드를 동적으로 생성되는 json 파일로 사용하여 자동 완성 jquery 플러그인을 사용하는 코드가 있습니다.jQuery 자동 완성에서 Twitter Typeahead로 전환

funderInput.autocomplete({ 
    //Look up funders by name and show suggestions 
    source:function(request, response) { 
     $.getJSON("/funder/suggest?name=" + request.term, function(data){ 
      response($.map(data.result.suggestions, function(item, index) { 
       return {label: item.name + " (" + item.location + ")", value: item.fundref}; 
      })) 
     }) 
    } 
}); 

나는 Typeahead에서 비슷한 작업을 수행 할 수 없습니다. 설명서에있는 예제는 다음을 제안하지만 정적 JSON 파일을 사용하는 것처럼 보입니다.

var bestPictures = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: '../data/films/post_1960.json', 
    remote: '../data/films/queries/%QUERY.json' 
}); 

bestPictures.initialize(); 

$('#remote .typeahead').typeahead(null, { 
    name: 'best-pictures', 
    displayKey: 'value', 
    source: bestPictures.ttAdapter() 
}); 

나는 이것을 시도했지만 정말 멀지 않았다!

저는 JavaScript 초보자입니다. 올바른 방향으로 가볍게 걷어차는 것이 가능한 경우에 한합니다.

답변

1

(typeahead 함수)은 응답 대신 프로세스라고합니다. 반송 과정을 시도하십시오

source: function (query, process) { 
     $.getJSON("/funder/suggest?name=" + query, function (data) { 
      return process($.map(data.result.suggestions, function (item, index) { 
       return { 
        label: item.name + " (" + item.location + ")", 
        value: item.fundref 
       }; 
      })) 
     }); 
    } 
+0

감사합니다. 완벽하게 작동합니다. – davidpauljunior

+0

Typeahead에 레이블과 값이 동일한 지 여부를 알고 있습니까? – davidpauljunior

+0

나만의 것을 만들 수 있습니다. 여기를 참고하십시오 : http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/ – SSA

관련 문제