在Laravel中具有动态输入字段和多维数组的Jquery-ui自动完成

Question

我需要添加带有动态输入字段的待售产品。字段使用Jquery ui的自动完成功能，以后我要同时获取ui.label和ui.value。

我的动态输入字段代码

$(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();
         });

     });

我想获取产品名称，产品ID（使用自动完成功能）和数量。并在提交表单后将其存储到数据库中。

我的自动填充代码

  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;
        }
 });




});

但是问题是，我不知道如何在动态输入中存储ui.value字段当我使用.onclick和目标类触发自动完成功能时功能。

我的控制器代码

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

一旦实现，我可能会问如何将输入的数组数据提取到数据库中。我感到很愚蠢，但是这个问题使我整日陷入困境，谷歌搜索。

Answer 1

我找到了解决方案，但是我不知道这是否是最好的方法。我用：

为我的id动态输入添加一些增量

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

然后我用以下命令搜索要存储数据的输入的ID：

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

我不知道这是否是一种奇怪的方法。

编辑：好吧，我现在可以存储ui.value，但是当我添加和删除输入字段时。 id是一团糟。输入字段有重复的ID。所以我想我需要找到行数并将其附加到ID上。