Typeahead의 하위 제목이 포함 된 그룹화 제안

Question

공항을 나열하는 원격 JSON 객체에 Typeahead 인스턴스를 가져 오는 중입니다. 아래 이미지와 같이 '위치 그룹'별로 제안서에 그룹화해야합니다.

{ 
    "locations":[ 
    { 
    "name":"London Intl Apt (YXU), Middlesex, Ontario, Canada", 
    "type":"airport", 
    "id":"528cc236e4b0ec1df53b21af", 
    "iata":"YXU", 
    "locationGroup":"", 
    "locationGroupName":"" 
    }, 
    { 
    "name":"London - Gatwick Apt (LGW), West Sussex, England, United Kingdom", 
    "type":"airport", 
    "id":"528cc236e4b0ec1df53b28cb", 
    "iata":"LGW", 
    "locationGroup":"LON", 
    "locationGroupName":"London - All Airports (LON)" 
    }, 
    { 
    "name":"London - Heathrow Apt (LHR), Greater London, England, United Kingdom", 
    "type":"airport", 
    "id":"528cc236e4b0ec1df53b28b1", 
    "iata":"LHR", 
    "locationGroup":"LON", 
    "locationGroupName":"London - All Airports (LON)" 
    } 
] 
} 

그래서 항목은 'locationGroup'값을 가지는 곳이 같은 다른 모든 항목 그룹화해야합니다

... 여기가 JSON 포맷하는 방법의 예입니다 'locationGroup'. 'locationGroup'이 없으면 개별적으로 나열되어야합니다.

필자는 아마도 Bloodhound 엔진을 설정할 때 (아마도 이것이 가능할 수도 있음) 추측하고 있습니다. 아마도 필터 내에서 가능할 것입니다. 그러나 어떻게 작동하는지 정말 고민 중입니다. 아무도 이것으로 도울 수 있습니까?

Answer 1

Typeahead.js의 헤더 및 섹션을 가져 오는 유일한 방법은 Multiple Sections with Headers example을 따르는 것입니다. 그들의 코드는 그들이하는 일에 대해 완전히 완전하지는 않으므로 코드와 예제를 모방하려고 시도 할 것입니다.

// Get the data 
var londonUk = new Bloodhound({ 
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: '../data/londonUk.json' 
}); 

var londonCa = new Bloodhound({ 
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: '../data/londonCa.json' 
}); 

// Intialize the Bloodhound 
londonUk.initialize(); 
londonCa.initialize(); 

// Set up Typeahead 
$('.transit-search .typeahead').typeahead({ 
    highlight: true 
}, 
{ 
    name: 'London UK All Airports', 
    displayKey: 'name', 
    source: londonUk.ttAdapter(), 
    templates: { 
     // This is the group header that will be shown at the top of a grouping 
     header: '<h3 class="group-name">London - All Airports (LON)</h3>', 
     // These will be the templates for the items within a group. 
     suggestion: Handlebars.compile(['<p class="indent">{{name}} {{type}}</p>']) 
    } 
}, 
{ 
    name: 'London CA All Airports', 
    displayKey: 'name', 
    source: londonCa.ttAdapter(), 
    templates: { 
     header: '<h3 class="group-name">London, ON, Canada - All Airports</h3>', 
     suggestion: Handlebars.compile(['<p class="indent">{{name}} {{type}}</p>']) 
    } 
}); 

여기서 어려운 점은 Typeahead.js가 데이터를 구조화하여 데이터를 그룹화 할 수있는 방식으로 데이터를 작동시키는 데 어려움이 있다는 것입니다. 하나의 거대한 JSON 파일을 건네주고 각각의 공항을 자체 목록으로 분류하여 각 Bloodhound 초기화에 대한 로컬 데이터 변수로 사용하거나 지원하는 모든 JSON 파일 및 공항에 대한 쿼리를 만들 수 있습니다 나는 위의 예제로 끝냈습니다.

첫 번째 것은 더 일관성이 있으며 서버에 대한 조회수가 상당히 줄어들지 만 데이터 마스킹이 필요하지만 각 항목에 그룹에 대한 변수가 있으므로 너무 어려워서는 안됩니다. 이것은 많은 초기화를 요구할 것입니다.하지만 당신이 원할 때 그룹화가 잘 될 것이라고 생각합니다.