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

Question

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

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

<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 недостаточно …
Мне нужно передать переменные для каждой строки динамически, чтобы завершить сценарий, но я не знаю, как.
Кто-нибудь может помочь с автозаполнением скрипта для добавленных элементов.

0

ajax autocomplete jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Когда ты бежишь $('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() в теме.

0