如何将自动完成添加到动态创建的输入？

Question

很抱歉提出一个已经回答的问题，我阅读了它们，但我不知道如何将它们应用到我的问题中。

基本上我有一个带有此输入的表单

<input class="auto" type="text" name="id_item[]" placeholder="Article ID" required style="width: 15%;"/>

然后我在它下面有一个空的 div，当用户单击添加按钮时，我在其中放置新创建的输入

<div id="next_items">
</div>

我创建和删除新输入的函数如下所示

$(document).ready( function() {
    $("#add_item").click( function() {
        $("#next_items").append('<input class="auto" class="new_id" type="text" name="id_item[]" placeholder="Article ID" required style="width: 15%;"/>');
    });

    $("#remove_item").click( function() {
        $(".new_id:last").remove();
    });
});

最后一件事是我的自动完成 js

$('input.auto').each(function() {
    $(this).autocomplete({
        source: "contract/auto",
        minLength: 1
    });
});

它对我的第一个输入工作正常，它一直在那里，但是当我尝试使用按钮添加新输入时，它不起作用。我尝试使用每个函数，但它仍然不起作用。类也开始在创建的按钮中混淆。我该如何解决这个问题？

Answer 1

您需要在附加后为该文本框绑定自动完成功能：

$("#add_item").click( function() {
    $("#next_items").append('<input class="auto" class="new_id" type="text" name="id_item[]" placeholder="Article ID" required style="width: 15%;"/>');
    $("#next_items .auto:last").autocomplete({
        source: "contract/auto",
        minLength: 1
    });
});

如何将自动完成添加到动态创建的输入？

How to add autocomplete to dynamically created inputs?

html

javascript

jquery

jquery-autocomplete