附加字段中的自动完成

Autocomplete in appended fields

本文关键字：字段      更新时间：2023-09-26

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

  1. 我通过单击带有 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 />' );
    });
});

  2. 使字段自动完成

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

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

您可以在

创建新元素时将自动完成附加到新元素：

    $(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
                });
        });
    });

如果您要添加动态 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 />' );
});  });
相关文章：