Verwenden von typeahead.js mit Angular 2

Question

Ich versuche, typeahead.js mit Angular 2 zu verwenden (um die Bloodhound-Funktion zu nutzen, da sie die beste ist). Allerdings habe ich Schwierigkeiten, die js-Datei in das Projekt zu importieren.

Ich habe im Anschluss an die in der index.html:

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

und die typeahead-Dateien:

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

Ich habe auch die jQuery importiert wie folgt in der systemjs.config:

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

Und ich habe die jQuery in der ngAfterViewInit Methode:

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 
      }); 




    } 

Die jQuery funktioniert (bestätigt durch den Konsolenprotokolleintrag). Jedoch habe ich die folgende Fehlermeldung erhalten:

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

und

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

Answer 1

Hier ist die meine Lösung. Hoffe jemand kann das helfen.

Installieren Sie typehead.js Typ Definition mit folgendem Befehl.

npm install --save @types/typeahead 

Fügen Sie die folgenden Dateien zur angular-cli.json-Datei hinzu.

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

folgenden Maßnahmen in OnInit() -Methode der Komponente

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 
    }); 

ich jQuery auch installiert haben.

Bitte stellen Sie sicher, dass folgende hinzuzufügen

import * as $ from 'jquery'; 

app.component.ts und vergewissern Sie sich folgende auf Ihrer Komponente Datei zu importieren.

declare const Bloodhound; 
declare const $; 

Komponente HTML-Datei

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