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