Typeahead add a custom line to end of suggestions

Question

Is there any possibility to add a custom line at end of all suggestions? I would like to add a "Show more suggestions" that is a link going to another page.

$(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>')
   }
 }
);


});

It is following the basic example on Git. I saw that the error message fires at "empty" in "templates", it there an option that it can fire on list complete or something like that.

Thanks a lot for all you help.

Answer 1

Ok, I found my own answer. From Typeahead API:

Datasets can be configured using the following options.

source – The backing data source for suggestions. Expected to be a function with the signature (query, cb). It is expected that the function will compute the suggestion set (i.e. an array of JavaScript objects) for query and then invoke cb with said set. cb can be invoked synchronously or asynchronously. A Bloodhound suggestion engine can be used here, to learn how, see Bloodhound Integration. Required.

name – The name of the dataset. This will be appended to tt-dataset- to form the class name of the containing DOM element. Must only consist of underscores, dashes, letters (a-z), and numbers. Defaults to a random number.

displayKey – For a given suggestion object, determines the string representation of it. This will be used when setting the value of the input control after a suggestion is selected. Can be either a key string or a function that transforms a suggestion object into a string. Defaults to value.

templates – A hash of templates to be used when rendering the dataset. Note a precompiled template is a function that takes a JavaScript object as its first argument and returns a HTML string.

empty – Rendered when 0 suggestions are available for the given query. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query.

footer– Rendered at the bottom of the dataset. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query and isEmpty.

header – Rendered at the top of the dataset. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query and isEmpty.

suggestion – Used to render a single suggestion. If set, this has to be a precompiled template. The associated suggestion object will serve as the context. Defaults to the value of displayKey wrapped in a p tag i.e.

{{value}}

.

So what one must do is:

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>')
}

Hope that this helps somebody :)