How to use Typeahead.js 0.10 step-by-step / remote / prefetch / local

Question

• POST for Twitter Typeahead

I have been for 2 days now, trying to understand and have a clear picture on how to use /manage typeahead.js 0.10 in order to use

Answer 1

I just spent some days trying to get this to work my self, and I totally agree that its not intuitive. In particular there was one thing on the typeahead page about Bloodhound that try as I might just didn't work. For example the following line:

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value') -- would always yield an error because obj didnt exist.

For the datumTokenizer use the following form(where "DisplayText" is the name of the property in your object that contains the text that will be displayed):

function (d) {
            return Bloodhound.tokenizers.whitespace(d.DisplayText);
        }

and remember when you create the typeahead set the displayKey to the name of the property in your collection that has the text data you want to display. For me this was always the same as the property I wanted to tokenize - so my typeahead statement looked like the following:

$('#my-typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 3
        },
    {
        name: 'someName',
        displayKey: 'DisplayText',
        source: myBloodhound.ttAdapter()
    }

Answer 2

The accepted answer, although correct at its time, is not of much use given that typeahead 0.10 is long outdated. Current version is 1.2.1 (as of 2018)

So answering the original question,
Here's a reference tutorial that has step by step explanation of using Typeahead with Bloodhound (local, prefetch, remote and a combination of these) with JS fiddles based on the still maintained fork - Typeahead v1.2.1

Answer 3

change to:

source : products.ttAdapter()