CODEWITHSUNDEEP
javascriptjqueryautocompletebootstrap-typeahead
user772401
user772401

Reputation: 2904

twitter typeahead with headers for the suggestions, how?

I followed this tutorial and implemented twitter typeahead with an ajax source (django backend) for recommendations into my drop down box.

I can get my dropdown to give me suggestions based on what I enter from but I'd like to be able to have headers to organize the various suggestions such as in this example:

enter image description here

from this site: http://twitter.github.io/typeahead.js/examples/

The problem with the examples on those site is non of them use an ajax source. I tried modifying the typeahead call like this

$(".typeahead").typeahead({
    source: function ( query, process ) {//ajax call stuff here...},
    updater: function(item) {//stuff goes here...},
    header: '<h3>Header Should Be Here</h3>', //<-- This should add a header to my suggestions, no?
    }

But my suggestions list doesn't get a header..

Is it at all possible to have such auto recommendations done via ajax data source with header labels for different types of suggestions?

Upvotes: 2

Views: 4308

Answers (1)

georgedyer
georgedyer

Reputation: 2745

Looking at the typeahead javascript source from the Bootstrap project, it seems it doesn't implement the 'header' option.

Clearly, the version demonstrated at http://twitter.github.io/typeahead.js/examples/ does implement the header. But it was added on March 24 (see https://github.com/twitter/typeahead.js/blob/master/CHANGELOG.md#090-march-24-2013), so the latest Bootstrap just hasn't incorporated this feature yet.

You could customize your bootstrap js file (here: http://twitter.github.io/bootstrap/customize.html) to exclude bootstrap's latest typeahead plugin and then include the more advanced javascript at http://twitter.github.io/typeahead.js/releases/latest/typeahead.js, so that you can use it instead.

Hope this helps!

Upvotes: 0

Related Questions