重复文本字段的自动完成答案

【问题标题】：Autocomplete for repeating text fields重复文本字段的自动完成
【发布时间】：2014-05-22 11:05:59
【问题描述】：

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

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

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

【问题讨论】：

您正在添加多个具有相同 ID 的元素，不好。添加动态 ID（通过增量变量）或改用类。
谢谢，但我在控制器中使用java.util.Map<String, String[]> map = request().body().asFormUrlEncoded();，所以拥有相同的 ID 不是问题。
抱歉，我可能不够精确：添加新输入的 JavaScript 函数始终添加 ID 为“标签”的输入。然后，您将自动完成插件应用到 ID 为“tags”的（一个！）元素。由于 ID 是唯一的，$('#tags') 只返回 1 个元素。这就是为什么只有 1 个字段有效。
删除链接也是如此，您应该使用 .remRT 类而不是 ID。

标签： javascript jquery html autocomplete

【解决方案1】：

按照我的 cmets，这应该至少可以解决您的自动完成功能。 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;
});

【讨论】：

谢谢，但自动完成仍然只发生在第一个文本字段中。我还尝试将函数移出$(")，并将另一个变量声明为i，但它仍然是一样的。
我只是更改了上面的代码示例。查看 Jquery 文档，找不到 $('html', function) ，我认为这从未被调用过，因此从未实际调用过。添加新输入后将其移至应正确附加它。
哦，我明白了。非常感谢您的帮助！