Using typeahead.js with Angular 2

Question

I am trying to use typeahead.js with Angular 2 (to make use of the Bloodhound feature, as it's the best one out there). However I am running into difficulty importing the js file into the project.

I have the following in the index.html:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

and the typeahead files:

<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.1.1/bloodhound.min.js"></script>

I also have the jQuery imported as follows in the the systemjs.config:

..
map: {
      'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js',
}..

And I have the jQuery in the ngAfterViewInit method:

ngAfterViewInit() {

            console.log("jQuery is ready");

            // constructs the suggestion engine
            var states = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                // `states` is an array of state names defined in "The Basics"
                local: states
            });

            $('#bloodhound .typeahead').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            },
                {
                    name: 'states',
                    source: states
            });




    }

The jQuery works (confirmed by the console log entry). However I get the following error:

jQuery.Deferred exception: $(...).typeahead is not a function TypeError: $(...).typeahead is not a function

and

ERROR TypeError: $(...).typeahead is not a function

Answer 1

Here is the my solution. Hope someone can help this.

Install typehead.js type definition using following command.

npm install --save @types/typeahead

Add following files to angular-cli.json file too.

"assets/js/bloodhound.min.js",
"assets/js/typeahead.bundle.min.js"

Do following in OnInit() method of the component

 const suggestions = [{
          value: 'string1'
        }, {
          value: 'string2'
        }, {
          value: 'string3'
        }, {
          value: 'string4'
        }, {
          value: 'string5'
        }];

 let bloodhoundSuggestions = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        sufficient: 3,
        local: this.suggestions
 });

 $('#tagsInput .typeahead').typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    }, {
        name: 'suggestions',
        displayKey: 'value',
        source: bloodhoundSuggestions
  });

I have installed jQuery too.

Please make sure to add following to app.component.ts

import * as $ from 'jquery';

And Make sure to import following on your component file.

declare const Bloodhound;
declare const $;

Component Html File

<div id="tagsInput">
   <input class="typeahead" type="text" placeholder="States of USA">
</div>