Подставляются одинаковые значения autocomplete

412

31 мая 2017, 04:52

Динамическая таблица по клику выпадают поля.

<table class="table table-bordered table-hover table-responsive" id="tab_logic">
 <thead>
   <tr>
     <th>.....</th>
   </tr>
 <tbody>
  <tr id='addr0'>
  <tr id='addr1'></tr>
 </tbody>
$(document).ready(function(){
 var product = ["<?php echo  $product; ?>"];
   var i=1;
    $("#add_row").click(function(){
     $('#addr'+i).html("<td><input type='text' name='product_name[]' class='form'></td>" +
     .............

С помощью autocomplete в первом поле я сделал повыпадавший список у меня выбираться название товара. Я его отправляю на сервер там делаю выборку и мне возвращает название модели которое подставляю в это поле

"<td><input name='model_product[]' class= 'model' type='text></td>" +

`$('#addr'+i).find('.form').autocomplete({ source:product,
   select: function(event, ui) {
    var product_name  = ui.item.value;
      console.log(product_name);
       $.ajax({
         type: 'POST',
         url: '/index.php?route=checkout/checkout/autocomplete',
         data:{ "name_product":product_name },
         success: function(data){
         $("input[name='model_product[]'").val(data);
        }
     });
   }
});
i++;`

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

добавляю еще один товар

После выбора меняется название модели, в первом поле, можно ли как то сделать, что бы модель подставлялась только та которая соответствует выбранному товару?

Answer 1

Как я увидел из ваших кусков кода у вас много input-ов для продуктов (<input name='model_product[]' class= 'model' type='text>), которые нечем не отличаются друг от друга.

Обясняю как работают селекторы в jQuery:

На вашем примере $("input[name='model_product[]'") - этот селектор выбирает набор элементов которые подходят вашим критериям, а если прямо с выборкой вы делаете какое то действие, то это действие влиять будет на весь набор выбранных элементов в селекторе.

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

Простой пример:

Есть несколько input

<input name='model_product[]' class= 'model1'  type='text>
<input name='model_product[]' class= 'model2'  type='text>
<input name='model_product[]' class= 'model3'  type='text>
`$('#addr'+i).find('.form').autocomplete({ source:product,
    select: function(event, ui) {
     var product_name  = ui.item.value;
       console.log(product_name);
        $.ajax({
          type: 'POST',
          url: '/index.php?route=checkout/checkout/autocomplete',
          data:{ "name_product":product_name },
          success: function(data){
          $("input.model1").val(data);
         }
      });
    }
});
i++;`

Вот здесь уже селектор выберет только тот input у которого класс model1 и действие произойдет только для него, остальные будут не тронуты.