Typeahead模板，如果/其他

感謝您對此問題的幫助：Typeahead result formatting，這是一個後續。Typeahead模板，如果/其他

我的JSON看起來像

[{ name="Long Island", type="2", id="1234"}, { name="New York", type="1", id="5678"}]

在下拉列表中，我需要能夠從2型獨立型的下降，所以

1型標題

類型1項

類型1項*

2型標題

型2項

如果沒有結果，1型，那麼不顯示標題。類型2相同。

這是可能的typeahead和模板引擎？我使用Hogan，但我不挑剔。

來源

2013-11-01 Leads

這樣做的「Typeahead」方法是將數據集分成兩個數據集，一個只返回「類型1」項目，另一個只返回「類型2」項目。在鍵入前面，每個數據集都可以有自己的header，這些數據集的行爲將與您想要的完全相同。

$autocomplete.typeahead([{ 
    name: 'location 1', 
    remote: { 
     url: 'http://pathtomysite.com/%QUERY?type=1', 
     dataType: 'jsonp', 
     valueKey: 'name' 
     filter: function (parsedResponse) { return parsedResponse.locations; } 
    }, 
    template: [ 
     '<p class="repo-name">{{name}}</p>', 
     '<p class="repo-description">{{id}}</p>' 
    ].join(''), 
    header: '<b>Type 1</b>' 
    engine: Hogan 
}, { 
    name: 'location 2', 
    remote: { 
     url: 'http://pathtomysite.com/%QUERY??type=2', 
     dataType: 'jsonp', 
     valueKey: 'name' 
     filter: function (parsedResponse) { return parsedResponse.locations; } 
    }, 
    template: [ 
     '<p class="repo-name">{{name}}</p>', 
     '<p class="repo-description">{{id}}</p>' 
    ].join(''), 
    header: '<b>Type 2</b>' 
    engine: Hogan 
}])

來源

2013-11-01 11:14:44

這不起作用，因爲它意味着我無法控制的JSON上的額外查詢。 – Leads

有幾種解決方法，我會在PC附近寫更多的解決方法。 –

請注意，上述代碼適用於v0.10.x之前的Typeahead.js版本 – bart

既然你沒有在JSON部分控制，你有兩個選擇：

選項1點

使用2的數據集，與相同查詢。其中之一，filter將只返回「類型1」的條目，在另一個filter將只返回「類型2」的答案。

這是JSON調用的兩倍，所以服務器負載是其兩倍。儘管如此，客戶端不會看到延遲，因爲查詢是併發的。

這是一個駭人聽聞的解決方案，但OTOH是乾淨的（客戶端方式），並且只需很少的代碼。

選項2

僅使用1集，因此，在您的filter一些工作。基本上，返回一個數組，其中包含「類型1」標題的條目，然後是所有類型1條目，然後是「類型2」標題的條目，然後是所有類型2條目。這個數組是一個對象數組。每個對象也將有一個class成員。在「類型1」和「類型2」標題的條目中，將類別設置爲"header"或者沿線，並且：

1）讓您的模板包含類。 2）讓你的CSS讓你的類無法選擇，不可點擊，並以你想要的方式進行設計。

我更喜歡選項＃1。

來源

2013-11-01 22:03:24

Typeahead模板，如果/其他

回答

相關問題