Typeahead.js 및/또는 Bloodhound 엔진에 대한 개체를 어떻게 나열합니까?

Question

json 파일을 소스로 사용하여 선행 작업을 사용하여 개체 목록을 표시하는 방법을 파악하는 데 어려움을 겪고 있습니다. 내 데이터가 표시되지 않습니다.

이름을 나열하고 다른 속성을 선택했을 때 다른 속성을 사용하고 싶습니다.

../data/test.json

[ 
    {"name": "John Snow", "id": 1}, 
    {"name": "Joe Biden", "id": 2}, 
    {"name": "Bob Marley", "id": 3}, 
    {"name": "Anne Hathaway", "id": 4}, 
    {"name": "Jacob deGrom", "id": 5} 
] 

test.js

$(document).ready(function() { 
    var names = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.whitespace("name"), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     prefetch: { 
      url: '../data/test.json' 
     } 
    }); 
    names.initialize(); 

    $('#test .typeahead').typeahead({ 
     name: 'names', 
     displayKey: 'name', 
     source: names.ttAdapter() 
    }); 
)}; 

test.html를

<div id="test"> 
    <input class="typeahead" type="text"> 
</div> 

** 그리고 누군가가 설명 할 수있는 경우 나에게 datumTokenizer와 queryTokenizer는 무엇인가? 그렇습니다. **

Answer 1

JSON 파일에는 JSON 객체 배열이 포함되어 있지만 Bloodhound 제안 엔진에는 JavaScript 객체 배열이 필요합니다.

은 따라서 당신은 당신의 프리 페치 선언에 필터를 추가해야합니다은 "datumTokenizer"에 관해서는

prefetch: { 
url: '../data/test.json', 
filter: function(names) { 
    return $.map(names, function(name) { 
    return { name: name }; 
}); 
} 

, 그 목적은 데이텀 (즉, 제안 값) 토큰 화 방법을 결정하는 것입니다이다. 이 토큰은 입력 쿼리와 일치하는 항목을 찾는 데 사용됩니다. 이것은 (사건 이름 값) 데이텀 소요 예컨대 두 토큰으로 분할

Bloodhound.tokenizers.whitespace("name") 

: 예컨대

"Bob Marley"는 두 개의 토큰 "Bob"과 "Marley"로 분리됩니다.

당신이 볼 수있는 방법 typeahead source을 확인하여 작동 토크 나이 공백 : 그것은 공백에 대한 정규식을 사용하여 데이텀을 분할하는 방법을

function whitespace(str) { 
str = _.toStr(str); 
return str ? str.split(/\s+/) : []; 
} 

주 (\ S + 즉 공백 중 하나 개 이상 발생).

마찬가지로 "queryTokenizer"는 검색어를 토큰 화하는 방법을 결정합니다. 다시 말하지만, 예제에서 공백 토큰 화 도구를 사용하고 있으므로 "Bob Marley"라는 검색어는 "Bob"과 "Marley"데이텀을 생성합니다.

따라서 토큰이 결정되면 "Marley"를 검색하면 "Bob Marley"와 일치하는 항목이 발견됩니다.

Answer 2

나는 간단한 옵션을 가지고 있는데, 당신이 한 것은 하나의 작은 오류를 제외하고는 정확합니다. 실제로 당신이 보여준 것처럼 객체 배열을 사용할 수 있습니다.

displayKey: 'name'을 display: 'name'으로 바꾸면 제대로 작동합니다.

그래서, 전체 선행 입력 기능이 tokenizers을 설명하기위한

$('#test .typeahead').typeahead({ 
    name: 'names', 
    display: 'name', 
    source: names.ttAdapter() 
});