Help Center

Menu

Template (auto-completion)

Description

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.

  • notFound - 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.

  • pending - Rendered when 0 synchronous suggestions are available but asynchronous suggestions are expected. Can be either a HTML string or a precompiled template. If it’s a precompiled template, the passed in context will contain query.

  • header - Rendered at the top of the dataset when suggestions are present. Can be either a HTML string or a precompiled template. If it’s a precompiled template, the passed in context will contain query and suggestions.

  • footer - Rendered at the bottom of the dataset when suggestions are present. Can be either a HTML string or a precompiled template. If it’s a precompiled template, the passed in context will contain query and suggestions.

  • suggestion - Used to render a single suggestion. Can be either a Handlebars template or a precompiled template. If it’s a precompiled template, the passed in context will contain a single suggestion.

  • group - Rendered at the top of suggestions inside a single dataset when suggestions are grouped into categories. Can be either an HTML string or a precompiled template. If it’s a precompiled template, the passed in context will contain group field, see itemGroup.

Source: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets

Any template must be wrapped in an HTML tag as the templated element is inserted into the DOM. If the template isn’t wrapped an error will be returned to a browser console.

Default value

template: {
    group: function(context) { return $('<div>').html(String(context.label)); },
    suggestion: function(context) { return $('<div>').html(String(context.label)); }
},
If you are using default Funnelback web service to provide suggestions, the transformation function will map the contents of the disp field into the label variable.

Examples

Display structured data for suggestion

Structured data mapped into label variable can be accessed using GPath style (dot-notation) ie. label.person.full_name, label.product etc.

Entry from CSV file containing JSON:

baking,900,{\"title\":\"Baking\"\,\"description\":\"Cooking food by surrounding it with hot\, dry air\, usually in an oven.\"\,\"listMetadata\": {\"level\":[\"beginner\"]},J,Cooking techniques,,http://www.foodista.com/technique/RNT367Z2/baking,U

A partial query for bak results in the following JSON returned by suggest.json:

[
  {
    "key": "baking",
    "disp": {"title":"Baking","description":"Cooking food by surrounding it with hot,dry air,usually in an oven.","listMetadata":{ "level":["beginner"]}},
    "disp_t": "J",
    "wt": "900",
    "cat": "Cooking techniques",
    "cat_t": "",
    "action": "http://www.foodista.com/technique/RNT367Z2/baking",
    "action_t": "U"
  }
]

Default suggestion template will render [object Object] label in a suggestion list as mapped content of disp field isn’t a string type. In this case template need to be updated to access structured data fields directly:

template: {
  suggestion: '<div>{{label.title}}<br/>level: {{label.listMetadata["level"][0]}}<br /><small>{{label.description}}</small></div>',
}

Conditional display of variables for suggestion

template: {
  suggestion: '<div>{{label.title}}{{#if label.type}} <em>({{label.type}})</em>{{/if}}<br/><small>{{label.description}}</small></div>',
}
template: {
  suggestion: '<div>{{label.title}}{{#if label.type}} <em>({{label.type}})</em> {{else if label.type2}} <em>({{label.type2}})</em> {{else}} <em>(Unknown type)</em>{{/if}}<br/><small>{{label.description}}</small></div>',
}

Display different header for empty and non-empty query

template: {
  header: function(context) {
    return $('<h4>').text(context.query ? 'Suggestions' : 'Quick Links').addClass('tt-category');
  }
}

Display alert when no suggestions found

template: {
  notFound: $('<div>').html('<em>No suggestions found</em>')
}
By default, the notFound template is wrapped with the header and footer templates. See templateMerge for details.

Display alert when waiting for receiving data

template: {
  pending: $('<div>').html('<i class="fa fa-spinner fa-pulse fa-fw"></i><span class="sr-only">Loading...</span>')
}
By default, the pending template is wrapped with the header and footer templates. See templateMerge for details.

See also