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

Try without the $(document).ready and directly in ngAfterViewInit instead? (which will trigger after document is ready, so it makes no sense to add to the document.ready event) — Peter Salomonsen
– Peter Salomonsen, Commented Jun 3, 2017 at 20:20
I've removed the document.ready event however I'm still getting the same error: ERROR Error: Uncaught (in promise): TypeError: $(...).typeahead is not a function — user3565164
– user3565164, Commented Jun 3, 2017 at 20:40
This plunk does not get the error - and it has your code in ngAfterViewInit: plnkr.co/edit/Xvm0zwut4on8n6LNJVHL?p=preview Also see in index.html - did you add your typeahead script tag before the angular scripts? — Peter Salomonsen
– Peter Salomonsen, Commented Jun 4, 2017 at 5:27
I've changed the typeahead to be before the angular scripts and still getting the same error ('typeahead': 'cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/…) - I do have 2 jQuery scripts being imported though - through the index.html and the system.config, which could be the problem? — user3565164
– user3565164, Commented Jun 4, 2017 at 14:49
Yes, try removing jquery from system.config. In the plunk I showed you it's only in index.html as a script tag. — Peter Salomonsen
– Peter Salomonsen, Commented Jun 5, 2017 at 4:36

marc_s · Accepted Answer · 2017-11-01 06:05:08Z

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>

Collectives™ on Stack Overflow

Using typeahead.js with Angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related