Typeahead js with Bloodhound- this.source is not a function

Question

I'm following this example for typeahead.js using Bloodhound to the T, but I'm getting a javascript error. What am I missing?

HTML: (.net razor view)

@Scripts.Render(Links.Scripts.typeahead_bundle_js) 
@Styles.Render(Links.Content.typeahead_min_css)
<input id="myInput" type="text" class="form-control" />

JS:

$(function () {
    var data = ["abce", "abcd", 'def', 'abcdef'];
    var bh = new Bloodhound({
        local: data,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        datumTokenizer: Bloodhound.tokenizers.whitespace
    });
    //bh.initialize(); //this wasn't in the example, adding it had no effect

    $('#myInput').typeahead({
        highlight:true
    },
    {
        name: "testData",
        source: bh
    });
});

gives the error in typeahead.bundle.js:

this.source is not a function

Foil

Answer 1

This one gave me a hard time too, because, same as you, I was doing everything to the letter as in the example... I took me a while to check the exact version of the lib that I use and compare it to the one in the example. I was using the typeahead.js 0.10.5 packaged in the 'twitter-typeahead-rails' gem, and in the examples the version used is typeahead.js 0.11.1.

As soon as I switched the version, everything started working as it should. There was even no need to re-map the array of strings into array of objects or to call ttAdapter on the source. Your code will probably work the way you posted it too...

---

Quote from twitter-typeahead changelog for the version 0.11..0:

...There are bunch of API changes with this release so don't expect backwards compatibility with previous versions. There are also many new undocumented features that have been introduced. Documentation for those features will be added before v1 ships. ...

Kitts

Note: this still applies in 2018 since the version is still 0.11.1. Also, if you're using Nuget, the version is 0.10.1 - so get the most recent version from their website. – Criterion

Answer 2

You have to use source: bh.ttAdapter() rather than source: bh

Basie

this got me halfway there, but all the results are just saying undefined, any ideas with that? – Foil

The way I usually do it is to use a displayKey option to the call to typeahead, but that's for referencing keys of objects. Maybe make your data array an array of objects with a value prop and pass a displayKey: 'value' to typeahead – Basie

I tried to do that but had no luck, would you mind posting a full example of that in the answer? – Foil

You can convert data into array of objects this way data = data.map(function(_, i){ return {'value': data[i]}; }); – Woodhouse

I think both the responses are good, but version 1.11.0, as @Kitts suggests, has other bug, see here , so I solved the problem keeping version 1.10.5 and used this response to solve my problem. – Philipphilipa

I am using version 0.11.1. I am able to use typeahead on 2 of my form controls. However, I am not able to use it on the 3rd control (all 3 controls are on the same page). Source of these input's typeahead is based on ajax. See this imgur.com/a/WyqIK You can see add-enquiry.php:404 & 423 lines. Data of line 404 works well, but data of line 423 doesn't. It's very strange! – Wetterhorn