функция autocomplete () для добавленных элементов

Question

У меня есть скрипт автозаполнения, который отлично работает на одном элементе.

<script type="text/javascript"><!--

    $('input[name="product"]').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: 'index.php?route=extension/module/price_autoupdate/autocomplete&user_token={{ user_token }}&filter_product=' +  encodeURIComponent(request),
                dataType: 'json',
                success: function(json) {
                    response($.map(json, function(item) {
                        return {
                            label: item['name'],
                            value: item['product_id']
                        }
                    }));
                }
            });
        },
        select: function(item) {
            $('input[name=\'product\']').val('');

            $('#input-product' + item['value']).remove();

            $('#input-product').append('<div id="input-product' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="module_price_autoupdate_product[]" value="' + item['value'] + '" /></div>');
        }
    });

    $('#input-product').delegate('.fa-minus-circle', 'click', function() {
        $(this).parent().remove();
    });
//--></script>

мой шаблон одного элемента:

<div class="form-group">
                <label class="col-sm-2 control-label" for="input-pricebyproduct"><span data-toggle="tooltip" title="{{ help_product }}">{{ entry_product }}</span></label>
                <div class="col-sm-10">
                  <input type="text" name="product" value="" placeholder="{{ entry_product }}" id="input-pricebyproduct" class="form-control" />
                  <div id="input-product" class="well well-sm" style="height: 150px; overflow: auto;">
                    {% for product in products %} 
                      <div id="input-pricebyproduct{{ product.product_id }}"><i class="fa fa-minus-circle"></i> {{ product.name }} 
                        <input type="hidden" name="module_price_autoupdate_product[]" value="{{ product.product_id }}" />
                      </div>
                    {% endfor %} 
                  </div>
                </div>
              </div>

Так что он работает нормально.Но мне нужно, чтобы это работало, когда я добавляю следующее поле.Для добавления я использую:

       <script type="text/javascript"><!--

            var pricebyproduct_row = {{ pricebyproduct_row }};
        function addpricebyproduct() {

            html  = '<tr  id="pricebyproduct-row-{{ pricebyproduct_row }}">';
            html += '  <td class="text-left">';
            html += '     <div class="form-group">';
            html += '      <label class="col-sm-2 control-label" for="input-pricebyproduct-{{ pricebyproduct_row }}">{{ entry_pricebyproduct }}<span data-toggle="tooltip" title="{{ entry_pricebyproduct }}">';
            html += '        </span>';
            html += '      </label>';
            html += '<div class="col-sm-6">';
            html += '  <input type="text" name="product" value="" placeholder="{{ entry_product }}" id="input-pproduct-{{ pricebyproduct_row }}" class="form-control" />';
            html += '    <div id="input-pricebyproduct" class="well well-sm" style="height: 150px; overflow: auto;">';
                            {% for product in products[pricebyproduct_row] %} 
            html += '     <div id="input-pproduct-{{ pricebyproduct_row }}{{ product.product_id }}"><i class="fa fa-minus-circle"></i> {{ product.name }} <input type="hidden" name="module_price_autoupdate_pricebyproduct[{{ pricebyproduct_row }}][product_id][]" value="{{ product.product_id }}" />';
            html += '         </div>';
            {% endfor %}
            html += '  </div>';
            html += '</div>';

            html += ' </div>';

            html += '</div>';
            html += '</td>';
            html += '  <td class="text-left"><button type="button" onclick="$(\'#pricebyproduct-row-' + pricebyproduct_row  + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
            html += '</tr>';

            $('#pricebyproducts tbody').append(html);

            pricebyproduct_row++;
}
        </script>

Следующее поле добавляется.Но я не могу выбрать какой-либо продукт из выпадающего списка.Я знаю php, но моих знаний по javascript, jquery недостаточно ... Мне нужно передавать переменные для каждой строки динамически, чтобы завершить сценарий, но я не знаю как.Кто-нибудь может помочь с сценарием автозаполнения для добавленных элементов.

Answer 1

Когда вы запускаете $('input[name="product"]').autocomplete({...}), вы на самом деле говорите

Получите все input элементы с атрибутом name, которые равны product, и вызовите autocomplete() для них.

Однако вы запускаете этот код только один раз, и когда вы добавляете другой динамически, вы никогда не вызываете autocomplete() для него, и поэтому ничего не происходит.

Одно из решений - вызватьautocomplete() на вновь созданном элементе из шаблона

$new = $(html);
$new.find('input[name="product"]').autocomplete({...})
$('#pricebyproducts tbody').append($new);

Другое решение состоит в том, чтобы связать вызов autocomplete() с оберткой, например body

$('body').on('focus', 'input[name="product"]', function() {
  $(this).autocomplete({...});
});

По сути говоря

Каждый раз, когда input[name="product"] вводится focus внутри body, звоните autocomplete().