Search code examples
javascriptjquerytwitter-bootstraphandlebars.jstypeahead.js

Typeahead.js: how does footer query work?

I am using Twitter typeahead.js. The docs say:

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.

However, I cannot manage to use query.

I would like to use it in something like:

footer: Handlebars.compile('<h3 class="tt-footer"><a href="search/%query"> See more results</a></h3>')

How does it actually work??

Solution

  • An example of a footer in action can be seen here:

    http://jsfiddle.net/Fresh/d7jdp03d/

    Do a search for a movie (e.g. Aliens) and you'll see the footer at the bottom of the suggestions.

    The key part of the code is:

    footer: Handlebars.compile("<b>Searched for '{{query}}'</b>")

    You need to use the Handlebars syntax (i.e. braces) to reference the query value, as this is the templating engine being used in this example.