typeahead funktioniert nicht bei allen

Question

Mit twitter typeahead: https://twitter.github.io/typeahead.js

ich mehrere typeaheads über ein data-typeahead Attribut zu initialisieren bin versucht, die Teil der URL repräsentiert ich als Quelle verwenden möchten.

Ich muss in der Lage sein, dies nach dynamischen neuen [data-typeahead] Elemente auf der Seite hinzugefügt werden.

Mein Code funktioniert überhaupt nicht. Es funktioniert nicht einmal auf [data-typeahead] Elemente, die bereits auf der Seite sind.

$('[data-typeahead]').typeahead({ 
    source: function (query, process) { 
     $.get(this.$element.data('typeahead')+'/'+query, function (data) { 
      alert(data); 
      process(data); 
     }); 
    }, 
    items: 10 
}); 

Jede Hilfe würde sehr geschätzt werden.

Answer 1

Er musste eine neue Funktion erstellen, die eine jede Schleife enthält, und sie aufrufen, wenn die Seite geladen wird, sowie jedes Mal, wenn ein neues Typeahead-Element zum DOM hinzugefügt wird.

Die einzelnen Schleifen löschen alle vorhandenen Typaeheads und initialisieren sie anschließend neu.

Ich verbrachte Stunden damit und das ist die einzige Lösung, die funktionierte.

function initialize_typeaheads() { 
    $('[data-typeahead]').each(function() { 
     var element = $(this); 

     element.typeahead('destroy'); 

     var results = new Bloodhound({ 
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 
      remote: { 
       url: element.data('typeahead')+'/'+'%QUERY', 
       wildcard: '%QUERY' 
      } 
     }); 

     element.typeahead(null, { 
      source: results, 
      limit: 10 
     }); 
    }); 
}