附加元素上的 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({...}) 时，您实际上是在说

获取所有具有name 属性的input 元素等于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"] 是focused 在body 内，调用 autocomplete()就可以了。