Jquery-ui Auto complete with dynamic input field and multi dimension array in Laravel

Question

I need to add products for sale with dynamic input field. The field use autocomplete from Jquery ui and later I want to fetch both ui.label and ui.value.

My dynamic Input Field Code

$(document).ready(function () {

         var count = 1;

         dynamic_field(count);

         function dynamic_field(number) {
             html = '<tr><div class="input_fields_wrap">';
             html += '<td><input type="text" name="productname[]" class="form-control producttarget" id="product"/></td></div>';
             html += '<td><input type="text" name="amount[]" class="form-control" /></td>';
             if (number > 1) {
                 html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
                 $('tbody').append(html);
             } else {
                 html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
                 $('tbody').html(html);
             }
         }

         $(document).on('click', '#add', function () {
             count++;
             dynamic_field(count);
         });

         $(document).on('click', '.remove', function () {
             count--;
             $(this).closest("tr").remove();
         });

     });

I want to fetch productname, productid (which using autocomplete) and amount. and store it to database after form submit.

My Autocomplete Code

  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
   $('body').on('click', '.producttarget', function(e) {
            $(this).autocomplete({
            source: function( request, response ) {
          // Fetch data
          $.ajax({
            url:"{{route('autocomplete')}}",
            type: 'post',
            dataType: "json",
            data: {
               _token: CSRF_TOKEN,
               search: request.term
            },
            success: function( data ) {
               response( data );
            }
          });
        },
        select: function (event, ui) {

           $(this).val(ui.item.label); // this one worked
           //this my problems.val(ui.item.value); 
           return false;
        }
 });




});

But the problem is, I don't know how to store ui.value in dynamic input field when i use .onclick and target class for triggering autocomplete function.

My Controller Code

public function search(Request $request)
    {
      $search = $request ->search;
      $result = Product::where('productname', 'LIKE', '%'. $search. '%')->get();
      $response = array();
        foreach($result as $r){
        $response[] = array("value"=>$r->id,"label"=>$r->productname);
      }
      echo json_encode($response);
      exit;
      } 

Once i achieve that i probably gonna ask how to fetch the inputted array data into database. I feel stupid but this problem got me stuck for whole day, googling.

Answer 1

i found my solution, but i don't know if it is the best way. i add some increment for my id dynamic input with :

html += '<td><input type="text" name="productname[]" class="form-control target product" id="productname_' + count + '"/></td>';
html += '<td><input type="text" name="productid[]" class="form-control" id="productid_' + count + '"/></td></div>';

then i search the id of input which i want to store the data with :

var str = this.id;
var a = str.indexOf("_");
var b = str.length;
var number = str.substring(a+1, b);
$('#productid_'+nomor).val(ui.item.value);

i dont know if its a strange way to achieve this.

EDIT : well i can store the ui.value now but when i add and remove the input field. the id is a mess. there are duplicate id for input field. so i guess i need to find the row count and append it to the id's.

EDIT 2:

just need to remove

$count--

in dynamic input code, and the id duplicate gone.