Using typehead in Angular 8: typeahead is not a function

155 Views Asked by At

I am trying to implement an autocomplete input that retrieves results from the backend, since the data is too large. I installed typehead by:

npm install typeahead.js
npm install --save @types/typeahead

Then, I included jquery in my angular.js and the following lines:

"node_modules/typeahead.js/dist/bloodhound.js",
"node_modules/typeahead.js/dist/typeahead.bundle.js",
"node_modules/typeahead.js/dist/typeahead.jquery.js"

And in my app.module.ts:

import * as $ from 'jquery';
import 'typeahead.js';

But when I try to load this code:

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

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

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

I always get the following error:

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

ANy idea?

0

There are 0 best solutions below