在附加字段中自动完成答案

【问题标题】：Autocomplete in appended fields在附加字段中自动完成
【发布时间】：2014-12-02 05:05:59
【问题描述】：

我正在尝试在附加字段中进行自动完成。示例：

我通过单击带有 id="add_field" 的链接向表单添加动态字段

var counter = 0;
$(function(){
    $('a#add_field').click(function(){
    counter += 1;
    $('#container').append(
        '<input id="field_' + counter + '" name="dynfields[]' + '" class="name" type="text" /><br />' );
    });
});

使字段自动完成

$(document).ready(function(){
    $("input[class=name]").autocomplete({
    source:'searches/product_autocomplete.php',
    minLength:2
    });
});

但是它不会自动完成。
我已经在 class="name" 的静态字段中尝试过这个，它可以工作。但它不适用于动态字段。

【问题讨论】：

标签： javascript php jquery autocomplete

【解决方案1】：

您可以在创建新元素时将自动完成附加到它：

    $(document).ready(function () {
        var counter = 0;
        $('#add_field').click(function () {
            counter += 1;
            $('<input id="field_' + counter + '" name="dynfields[]' + '" class="name" type="text" /><br />')
                .appendTo($('#container'))
                .autocomplete({
                    source: 'searches/product_autocomplete.php',
                    minLength: 2
                });
        });
    });

【讨论】：

【解决方案2】：

如果您要添加动态 HTML，那么它不会在页面加载时加载到 DOM 中。您可能需要在页面加载后附加一个事件。

尝试：

var counter = 0; 
$(function(){
    $("#dataTable tbody" )on('click', 'tr', function()
     {
       counter += 1;
       $('#container').append(
        '<input id="field_' + counter + '" name="dynfields[]' + '" class="name" type="text" />
        <br />' );
});  });

【讨论】：