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

因为您在创建新自动填充之前正在进行自动填充。它不只是自动应用它，它只在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 3

问题在于仅在页面加载时初始化自动完成。因此不会添加到动态添加的输入中。您应该通过再次调用自动完成功能将自动填充功能添加到这些功能。因此，在您添加新输入后，只需再次调用自动完成功能：

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

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>

在JQuery中对附加字段进行自动完成

4 个答案: