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>