在Typeahead中用小標題分組建議

我有一個Typeahead的實例，它提供了一個列出機場的遠程JSON對象，我需要按照位置組的方式將它們分組，如下圖所示：在Typeahead中用小標題分組建議

enter image description here

...這是的JSON是如何格式化的例子：

{ 
    "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的價值應該與所有其他項目使用相同的分組'locationGroup'。如果沒有'locationGroup'，它應該單獨列出。

我猜測（假設這是可能的），這應該在我建立Bloodhound引擎時完成 - 可能在Filter中 - 但我真的很努力想辦法。任何人都可以幫忙嗎？

來源

2014-03-03 ParkerDigital

獲取「位置」數據數組的URL是否允許您在「locationGroup」上過濾？ –

不，不幸的是，我只能通過'姓名' – ParkerDigital

不幸的是，它似乎是獲得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文件和機場進行查詢，如我已經完成了上面的例子。

第一個可能會更加一致，使服務器的命中率大大降低，但需要一些數據按摩才能開始，但您已經在每個項目中爲該組設置了變量，所以這應該不會太困難。這將需要很多初始化，但我認爲分組會按照您的需要進行工作。

來源

2014-03-03 17:26:05 ericsaupe

在Typeahead中用小標題分組建議

回答

相關問題