Typeahead dodaj niestandardową linię do końca sugestii

Question

Czy istnieje możliwość dodania niestandardowej linii na końcu wszystkich sugestii? Chciałbym dodać "Pokaż więcej sugestii", czyli link do innej strony.

$(function(){ 

var countries = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: { 
    url : '/json/temp/countries.json', 
    filter: function(list) { 
     return $.map(list, function(country) { return { name: country }; }); 
    } 
    }, 
}); 

countries.initialize(); 

$('.component-search-button .ui-input input').typeahead(null, 
{ 
    highlight: true, 
    name: 'countries', 
    displayKey: 'name', 
    source: countries.ttAdapter(), 
    templates: { 
    empty: [ 
     '<div class="empty-message">', 
      '<i>Unfortunatelly we coud not find items that match the current query. Please try again.</i>', 
     '</div>' 
    ].join('\n'), 
    suggestion: Handlebars.compile('<p><strong>{{name}}</strong></p>') 
    } 
} 
); 


}); 

Podąża za podstawowym przykładem na Git. Widziałem, że komunikat o błędzie uruchamia się na "pustym" w "szablonach", to jest opcja, która może wystrzelić z listy kompletnej lub coś podobnego.

Wielkie dzięki za pomoc.

Answer 1

Ok, znalazłem własną odpowiedź. Od Typeahead API:

Zestawy danych można konfigurować za pomocą następujących opcji.

źródło - źródło danych dla sugestii. Oczekuje się, że będzie to funkcja z podpisem (zapytanie, cb). Oczekuje się, że funkcja obliczy zestaw sugestii (tj. Tablicę obiektów JavaScript) dla zapytania, a następnie wywoła cb z tym zestawem. cb można wywoływać synchronicznie lub asynchronicznie. Można tu użyć silnika sugestii Bloodhound, aby dowiedzieć się, jak to zrobić, patrz Integracja Bloodhound. Wymagany.

nazwa - nazwa zestawu danych. Zostanie on dołączony do tt-dataset- w celu utworzenia nazwy klasy zawierającego element DOM. Musi składać się wyłącznie z podkreśleń, kresek, liter (a-z) i cyfr. Domyślna liczba losowa.

displayKey - Dla danego obiektu sugestii określa jego reprezentację. Będzie to używane podczas ustawiania wartości kontrolki wejściowej po wybraniu sugestii. Może być ciągiem kluczowym lub funkcją, która przekształca obiekt sugestii w ciąg znaków. Domyślne wartości. Szablony

- Mieszanie szablonów używanych podczas renderowania zestawu danych. Uwaga: wstępnie skompilowany szablon to funkcja, która pobiera obiekt JavaScript jako swój pierwszy argument i zwraca ciąg znaków HTML.

pusty - renderowany, gdy dla danego zapytania dostępne są 0 podpowiedzi. Może być ciągiem HTML lub szablonem prekompilowanym. Jeśli jest to szablon wstępnie skompilowany, przekazywany kontekst będzie zawierał zapytanie.

stopka - renderowana u dołu zestawu danych. Może być ciągiem HTML lub szablonem prekompilowanym. Jeśli jest to szablon skompilowany, przekazywany kontekst będzie zawierał zapytanie i isEmpty.

Nagłówek

- renderowany u góry zestawu danych. Może być ciągiem HTML lub szablonem prekompilowanym. Jeśli jest to szablon skompilowany, przekazywany kontekst będzie zawierał zapytanie i isEmpty.

sugestia - służy do renderowania pojedynczej sugestii. Jeśli jest ustawiony, musi to być szablon prekompilowany. Powiązany obiekt sugestii będzie służyć jako kontekst. Domyślnie wartość displayKey zawijana w tag p, tj.

{{value}}

.

Więc co trzeba zrobić, to:

templates: { 
empty: [ 
    '<div class="empty-message">', 
     '<i>Unfortunatelly we coud not find items that match the current query. Please try again.</i>', 
    '</div>' 
    ].join('\n'), 
    footer : [ 
    '<div class="more-results">', 
     '<a href="#">More Results</a>', 
    '<div>' 
    ].join('\n'), 
    suggestion: Handlebars.compile('<p>{{name}}</p>') 
} 

nadzieję, że ktoś pomaga :)