11

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

DLeh
  • 23,806
  • 16
  • 84
  • 128

2 Answers2

16

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

bosskovic
  • 2,034
  • 1
  • 14
  • 29
  • 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. – chakeda Jan 05 '18 at 21:42
2

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

glittershark
  • 534
  • 2
  • 6
  • 19
  • 1
    this got me halfway there, but all the results are just saying `undefined`, any ideas with that? – DLeh May 21 '15 at 15:23
  • 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 – glittershark May 21 '15 at 15:38
  • I tried to do that but had no luck, would you mind posting a full example of that in the answer? – DLeh May 21 '15 at 17:28
  • You can convert data into array of objects this way `data = data.map(function(_, i){ return {'value': data[i]}; });` – Dhiraj May 23 '15 at 22:13
  • I think both the responses are good, but version 1.11.0, as @bosskovic suggests, has other bug, see [here](http://stackoverflow.com/questions/31746885/typeahead-js-not-returning-all-results) , so I solved the problem keeping version 1.10.5 and used this response to solve my problem. – pictoru Dec 16 '16 at 11:25
  • 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 http://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! – Yogesh Mistry Jul 27 '17 at 16:49