Typeahead mit Eingang dynamisch erstellt

Question

Ich habe eine Eingabe mit Typeahead mit Remote-Quelle .. es funktioniert gut! Wenn ich versuche, neue Eingabe von Jquery hinzuzufügen, funktioniert das nicht!

es ist mein Code:

<input name="name" class="form-control typeahead typeaheadFluxClient" type="text"> 

<script type="text/javascript"> 
var flux = new Bloodhound({ 
     datumTokenizer: function(item) { 
      return Bloodhound.tokenizers.whitespace(cleanAcronym(item.nom)); 
     }, 
     queryTokenizer: function(query) { 
      return Bloodhound.tokenizers.whitespace(cleanAcronym(query)); 
     }, 
     limit: 10, 
     remote: { 

     url: 'remote Url !', 
     replace: function (url, query) { 
      if ($('.typeaheadFluxClient:focus').val()) { 
       url += '?title=' + $('.typeaheadFluxClient:focus').val(); 
      } 
      return url; 
     }, 
     ttl:1, 
     filter: function(list) { 
      return $.map(list, function(ligne) { return {id:ligne.page_id}}); 
     } 

     } 
    }); 
function initTypeAhead(no) { 
    var selection='.typeahead'; 
    if (no) { 
     selection = selection+'-'+no; 
    } 
    $('.typeaheadFluxClient').typeahead({minLength: 1}, { 
     name: 'flux', 
     displayKey: 'nom', 
     source: flux.ttAdapter(), 

     templates: { 
      empty: [ 
       'no type ahead', 
       '@lang('events.no_typeahead')', 
       '<span class="empty-message-details">', 
       'no type ahead', 
       '</span>', 
       '</div>' 
      ].join('\n'), 
      suggestion: function (datum) { 
       var html=datum.nom; 

       return html 
      } 
     } 
    }); 
} 
flux.initialize(); 
initTypeAheadClientFluxPages(); 

Hier werde ich versuchen, Eingang mit jquery mit der gleichen Klasse von typeahead hinzuzufügen! aber es hat nicht funktioniert:

$("#addbtn").on("click", function() { 
    var count = $(".associateFluxCLient").length; 
    var html = `<hr> 

        <div class="form-group"> 
         <label for="object" class="col-sm-2 control-label">Nom</label> 
         <div class="col-sm-10"> 
          <input name="fluxClientPageTitle[`+count+`]" class="form-control typeahead typeaheadFluxClient" type="text" > 
         </div> 
        </div> 
`; 
    $("#container").append(html); 

Wie kann ich das auflösen?

Answer 1

Sie fügen dem DOM die neue Eingabe dynamisch hinzu, sodass die TypeaheadJS-Bibliothek nicht weiß, dass das Element existiert, um es zu initialisieren.

In Ihrem Ereignishandler click für addbtn müssen Sie das neue Steuerelement explizit initialisieren. Ich würde auch die options hash für die Typeahead in eine separate Variable ziehen, die wiederverwendet werden kann (vorausgesetzt, Sie möchten die meisten Einstellungen wiederverwenden).

var taOptsHash = { 
    minLength: 1 
}, { 
    name: 'flux', 
    displayKey: 'nom', 
    source: flux.ttAdapter(), 
    templates: { 
     empty: [ 
      'no type ahead', 
      '@lang('events.no_typeahead')', 
      '<span class="empty-message-details">', 
      'no type ahead', 
      '</span>', 
      '</div>' 
     ].join('\n'), 
     suggestion: function (datum) { 
      var nom = datum.nom; 
      return nom; 
     } 
    } 
}; 

Sobald Sie tun, dass Sie die initTypeAhead Funktion ändern können, damit Sie sie wiederverwenden können. ** Ich entfernte die ursprüngliche Variable, die Sie vorbei in, weil Sie es wirklich nicht in der Funktion überall:

function initTypeAhead(optsHash) { 
    $('.typeaheadFluxClient').typeahead(optsHash); 
} 

Dann können Sie Ihre Click-Ereignishandler ändern, um die Initialisierung explizit nennen. ** Ich habe ein paar Änderungen an den Code, den Sie einige Syntaxfehler zu beheben vorgesehen:

$("#addbtn").on("click", function() { 
    var count = $(".associateFluxCLient").length; 
    var newEl = '<hr>'; 
     newEl += '<div class="form-group">'; 
     newEl += '<label for="object" class="col-sm-2 control-label">Nom</label>'; 
     newEl += '<div class="col-sm-10">' 
     newEl += '<input id="fluxClientPageTitle[` + count + `]" name="fluxClientPageTitle[` + count + `]" class="form-control typeahead typeaheadFluxClient" type="text" >'; 
     newEl += '</div>'; 
     newEl += '</div>'; 
    $("#container").append(newEl); 
    initTypeAhead(taOptsHash); 
}); 

Am Ende, das ist nur ein Weg ist, um es zu möglicherweise zu behandeln. Das Grundproblem besteht darin, dass Sie planen müssen, mit allen Elementen umzugehen, die Sie dem DOM dynamisch hinzufügen. Weitere Informationen finden Sie unter this question.