附加元素的autocomplete（）函数

Question

I have aoutocomplete script which working fine on single element.

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

my single element template:

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

So it is working fine. But I need this to work when I append the next field. To append I use:

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

The next field appending. But I can't select any product from dropdown. I know php, but my knowledges for javascript, jquery are not enough... I need to pass variables for each row dynamicaly to outocomplete script, but I don't know how. Can anybody help with autocomplete script for appended elements.

Answer 1

When you run $('input[name="product"]').autocomplete({...}) you are actually saying

Get all the input elements with attribute name that equal product and call autocomplete() on them.

However you are only running this code once and when you add another one dynamically, you are never calling autocomplete() on it and that is why nothing is happening.

One solution is to call autocomplete() on the newly created element from template

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

Another solution is to bind the autocomplete() call on a wrapper, like body

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

Essentially saying

Each time an input[name="product"] is focused inside body, call autocomplete() on it.