Autocomplete auf angehängtem Feld in JQuery

Question

Ich benutze JQuery, um zusätzliche Eingabefelder über einen Link zu erstellen. Derzeit habe ich ein Autocomplete-Plugin implementiert, das für die Felder funktioniert, die beim Laden der Seite erstellt wurden. Wenn der Benutzer neue Felder hinzufügt, funktioniert die automatische Vervollständigung nicht für diese bestimmten Felder. Ich habe mich nur gefragt, ob mir jemand helfen könnte, herauszufinden, wie man es zur Arbeit bringt.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#addingredient').click(function() { 
      $('<li />').append('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />') 
      .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />') 
      .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>') 
      .appendTo('#ingredients') 
      .hide() 
      .fadeIn('normal'); 
     }); 
</script> 

<script> 
    $(document).ready(function(){ 
     var data = "http://mywebsite.com/ingredients.php"; 
     $(".ingredient").autocomplete(data); 
    }); 
</script> 


<ul id="ingredients"> 
    <li><input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" /><input type="text" class="amount" name="amount[]" id="amount[]" size="5" /><select class="unit" name="unit[]" id="unit[]"><?=$units ?></select></li> 
    <li><input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" /><input type="text" class="amount" name="amount[]" id="amount[]" size="5" /><select class="unit" name="unit[]" id="unit[]"><?=$units ?></select></li> 
    <li><input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" /><input type="text" class="amount" name="amount[]" id="amount[]" size="5" /><select class="unit" name="unit[]" id="unit[]"><?=$units ?></select></li> 
</ul> 

Answer 1

Sie müssen die automatische Vervollständigung für das neue Element erneut ausführen, nachdem es dem DOM hinzugefügt wurde. Das Folgende wartet, bis das Element eingeblendet wurde, und richtet dann die Autovervollständigung für das neue Element mit der korrekten Klasse ein.

<script type="text/javascript"> 
    var data = "http://mywebsite.com/ingredients.php"; 
    $(document).ready(function() { 
     $('#addingredient').click(function() { 
      $('<li />').append('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />') 
      .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />') 
      .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>') 
      .appendTo('#ingredients') 
      .hide() 
      .fadeIn('normal', function() { 
       $(this).find('.ingredient').autocomplete(data); 
      }); 
     }); 
     $(".ingredient").autocomplete(data); 
    }); 
</script> 

Answer 2

Das Problem besteht darin, dass die Autovervollständigung nur beim Laden der Seite initialisiert wird. Wird also nicht zu dynamisch hinzugefügten Eingängen hinzugefügt. Sie sollten die Autovervollständigung auch diesen hinzufügen, indem Sie die Autovervollständigung erneut aufrufen. So, nachdem Sie die neue Eingabe apended haben rufen Sie die Funktion zur automatischen Vervollständigung wieder:

$(".ingredient").autocomplete(data); 

Answer 3

Da Sie die Autovervollständigung tun, bevor eine neue erstellt wird. Es wird nicht automatisch angewendet, sondern nur, wenn das DOM bereit ist.

<script type="text/javascript"> 

$(document).ready(function() { 
    $('#addingredient').click(function() { 
     $('<li />').append('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />') 
     .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />') 
     .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>') 
     .appendTo('#ingredients') 
     .hide() 
     .fadeIn('normal'); 

     var data = "http://mywebsite.com/ingredients.php"; 
     $('.ingredient').autocomplete(data); 
    }); 
} 

</script> 

Versuchen Sie stattdessen.

Answer 4

Verbesserung bei früheren Antwort von tvanfosson (unnötigem DOM-Lookup zu verhindern):

<script type="text/javascript"> 
    var data = "http://mywebsite.com/ingredients.php"; 
    $(document).ready(function() { 
     $('#addingredient').click(function() { 
      var newIngredient = $('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />'); 
      $('<li />').append(newIngredient) 
       .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />') 
       .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>') 
       .appendTo('#ingredients') 
       .hide() 
       .fadeIn('normal'); 
      newIngredient.autocomplete(data); 
     }); 
     $(".ingredient").autocomplete(data); 
    }); 
</script>