Автозаполнение jQuery для динамически созданных входных данных

У меня возникла проблема с использованием автозаполнения jQuery с динамически созданными входными данными (снова созданными с помощью jQuery). Я не могу заставить автозаполнение привязываться к новым вводам.

Автозаполнение

      $("#description").autocomplete({
         source: function(request, response) {
            $.ajax({
                url: "../../works_search",
                dataType: "json",
                type: "post",
                data: {
                    maxRows: 15,
                    term: request.term
                },
                success: function(data) {
                    response($.map(data.works, function(item) {
                        return {
                                label: item.description,
                                value: item.description
                        }
                    }))
                }
            })
        },
        minLength: 2,
    });


Новая строка таблицы с входными данными

var i = 1;
var $table = $("#works");
var $tableBody = $("tbody",$table);

$('a#add').click(function() {
    var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" id="description" name="item[' + i + '][works_description]" /></td></tr>');
    $tableBody.append(newtr); 
    i++;
});

Я знаю, что проблема связана с тем, что контент создается после загрузки страницы, но я не могу понять, как это обойти. Я прочитал несколько связанных вопросов и столкнулся с живым методом jQuery, но я все еще в затруднительном положении!

Любой совет?


input dynamic jquery append jquery-autocomplete
person Jamatu    schedule 18.04.2010    source источник

Ответы (2)


arrow_upward
24
arrow_downward

Сначала вы захотите сохранить параметры для .autocomplete(), например:

var autocomp_opt={
         source: function(request, response) {
            $.ajax({
                url: "../../works_search",
                dataType: "json",
                type: "post",
                data: {
                    maxRows: 15,
                    term: request.term
                },
                success: function(data) {
                    response($.map(data.works, function(item) {
                        return {
                                label: item.description,
                                value: item.description
                        }
                    }))
                }
            })
        },
        minLength: 2,
    };

Более аккуратно использовать атрибут class для маркировки input, например:

<input type="text" class="description" name="item[' + i + '][works_description]" />

Наконец, когда вы создаете новую строку таблицы, примените .autocomplete() с параметрами, уже сохраненными в autocomp_opt:

$('a#add').click(function() {
    var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" class="description" name="item[' + i + '][works_description]" /></td></tr>');
    $('.description', newtr).autocomplete(autocomp_opt);
    $tableBody.append(newtr); 
    i++;
});
person Z. Zlatev    schedule 18.04.2010

arrow_upward
0
arrow_downward

Я обнаружил, что мне нужно поставить автозаполнение после добавления, поэтому:

 $tableBody.append(newtr);  
 $('.description', newtr).autocomplete(autocomp_opt);
person Alex    schedule 17.06.2013