javascript - 自动完成重复文本字段

Question

美好的一天!我有一个表单，使用户能够动态添加和删除输入文本字段。每个文本字段应该建议一些值或自动完成。添加和删​​除字段成功。但是，只有第一个文本字段会自动建议。

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>

$(function() {
    var availableTags = @Html(Json.toJson(tagNames).toString); 

    var scntDiv = $('#addMore');
    var i = $('#addMore p').size() + 1;



    $('#addRT').live('click', function() {
            $('<p><label for="tags"><input id="tags" type="text" name="relatedTags.tag.name" placeholder="Name"/></label> <a href="#" id="remRT">Remove</a></p>', 
                    function() {
                        $( "#tags" ).autocomplete({
                            source: availableTags
                        });
                    }).appendTo(scntDiv);
            i++;

            return false;
    });

    $('#remRT').live('click', function() { 
            if( i > 1 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });

});

$(function() {
    var availableTags = @Html(Json.toJson(tagNames).toString); 
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});


</script>

但同样的问题仍然存在。请帮我解决这个问题。非常感谢!

Answer 1

根据我的评论，这至少应该解决您的自动完成功能。 ID 是通过使用代码中已有的迭代器动态创建的。

$('#addRT').live('click', function() {
        $('<p><label for="tags"><input id="tags'+i+'" type="text" name="relatedTags.tag.name" placeholder="Name"/></label> <a href="#" id="remRT">Remove</a></p>').appendTo(scntDiv);

        $( "#tags"+i ).autocomplete({
          source: availableTags
        });

        i++;

        return false;
});