aurelia steps to install typeahead.js

Question

I've been trying to get typeahead running in Aurelia for a bit today. So far I've got bloodhound to do its thing, but no luck with typeahead so far?

install steps

npm

npm install jquery --save
npm install typeahead-js --save
npm install typeahead.js-bootstrap4-css --save

typescript files*

typings install dt~jquery --global --save
typings install dt~typeahead --global --save

* side note: removed all protractor ts files to sidestep the jquery / protractor $ conflict.

added these to aurelia.json vendor bundle

"jquery",
{
   "name" : "typeaheadjs",
   "path" : "../node_modules/typeahead.js/dist",
   "main" : "typeahead.jquery",
   "deps" : ["jquery"],
   "exports": "$"
},          
{
   "name" : "bloodhound",
   "path" : "../node_modules/typeahead.js/dist",
   "main" : "bloodhound"
}

make a sample element

import * as Bloodhound from 'bloodhound';
import * as $ from 'jquery';
import 'typeaheadjs';

export class Autocomplete{


  activate(){
    debugger;

    var engine = this.makeEngine();
    this.runTypeahead( engine );
  }

  runTypeahead( engine : any ) : void{
    $( "#thetypeahead" )
        .typeahead(null,
        {
            name: 'files',
            source: engine,
            limit: 20
        });
  }

  makeEngine() : any {
    var engine = new Bloodhound({
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        local: [{ id: 1, name: 'dog' }, { id: 2, name: 'pig' }],
        identify: function(obj) { return obj.id; }
    });

    return engine;
  }
}

The error message is a runtime error cause its not putting typeahead onto jquery

Message: $(...).typeahead is not a function

How to I get the typeahead plugin to load?

Not an answer to your question but here's a zero dependencies Aurelia autocomplete: https://gist.run/?id=acf8253329939b2e046cd0e3394351fe — Jeremy Danyow, Dec 27 '16 at 01:48
@JeremyDanyow I will work with that, Leaving question up as is. — monkeyhouse, Dec 27 '16 at 04:09
I used the one by jeremydanyow. I had to add style and a feature but it worked for my purposes, it was very modifyable and easy to work with, bit of a learning curve — monkeyhouse, Feb 01 '17 at 18:30
Got the basic sample working with `webpack` (however without `bloodhound` just because it's getting too late, tomorrow is another day). The error you got was similar to the message I had with `webpack` and `datepicker`, this stackoverflow [answer](http://stackoverflow.com/a/41271362) helped me. Issue I had was related to the `datepicker` trying load his own `jquery` version and that caused a problem. Also make sure `jquery` is at beginning of your bundle, you could try loading `jquery` in `prepend` section and/or maybe ready this [aurelia cli issue](https://github.com/aurelia/cli/issues/257) — ghiscoding, Feb 14 '17 at 05:42

aurelia steps to install typeahead.js

0 Answers0