Автозаполнение в добавленное поле в JQuery

Question

Я использую JQuery для создания дополнительных полей ввода, щелкнув ссылку. В настоящее время у меня реализован плагин автозаполнения, который отлично подходит для полей, созданных при загрузке страницы. Когда пользователь добавляет новые поля, автозаполнение не работает для этих конкретных полей. Мне просто интересно, может ли кто-нибудь помочь мне разобраться, как заставить его работать.

<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

Вам необходимо перезапустить автозаполнение нового элемента после его добавления в DOM. Следующее будет ждать, пока элемент не исчезнет, ​​а затем настроит автозаполнение нового элемента с правильным классом.

<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

Проблема заключается в том, что автозаполнение только инициализируется при загрузке страницы. Таким образом, это не добавляется к динамически добавленным входам. Вы должны добавить автозаполнение к этим, снова вызвав автозаполнение. Поэтому после того, как вы apended новый вход просто вызовите функцию автозаполнения снова:

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

Answer 3

Потому что вы делаете автозаполнения, прежде чем новый будет создан. Он не просто автоматически применяет его, он только делает это, когда DOM готов.

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

Попробуйте это вместо этого.

Answer 4

Улучшение на предыдущий ответ на tvanfosson (предотвращение ненужного DOM поиск): ответ

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