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

(불필요한 DOM 조회를 방지) tvanfosson에 의해 이전의 대답에 개선 :

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