Question

这是我的产品数据及其各自的品牌详情（Laravel关系/ SQL连接）

[
  {
    "id": 2, <--------- product.id
    "name": "iphone", <--------- product.name
    "created_at": "2017-02-08 06:12:34",
    "updated_at": "2017-02-08 06:12:34",
    "user_id": 1,
    "brand_id": 1,
    "ms_url": "google.com",
    "gravity": 1.03,
    "example_id": null,
    "relevance": 210,
    "brand": {
      "id": 1,
      "name": "apple",<--------- product.brand.name
      "created_at": "2017-02-08 03:00:49",
      "updated_at": "2017-02-08 03:00:49",
      "user_id": 1,
      "abbreviation": "AP",
      "visible": 1
    }
  }
]

这是autocomplete（）选项的ajax部分。我想要它用品牌填写输入，然后填写产品名称。

source: function(request, response) {
    $.ajax({
      type: "GET",
      url: "/find",
      dataType: "json",
      data: {
        term: request.term
      },
      error: function(xhr, textStatus, errorThrown) {
        alert('Error: ' + xhr.responseText);
      },
      success: function(data) {
        console.log('data: ' + data.brand.name + ' - ' + data.name);
        //Outputs: apple - iphone
        response($.map(data, function(product) {
          return {
            label: product.brand.name + " " + product.name,
            value: product.brand.name + " - " + product.name
          };
        }))
      }
    });
  },
  select: function(event, ui) {
    console.log(ui);
    //only conains product.brand.name & product.name, I need product.id 

    //  $(this).data('prod-id', ui.id);

  }

问题：我怎样才能传递product.id，以便将其添加到输入的数据属性中？我已动态添加输入，我希望在提交到数据库之前检查后端的产品ID，而不是检查输入值。

输入的当前输出

<input type="text" class="ui-autocomplete-input" data-prod-id="" value="apple - iphone">

输入的期望输出

<input type="text" class="ui-autocomplete-input" data-prod-id="2" value="apple - iphone">

Answer 1

你可以采取不同的价值＆＃34;价值＆＃34;和＆＃34;标签＆＃34;键然后在选择事件时分配值。

示例：

source: function(request, response) {
    $.ajax({
      type: "GET",
      url: "/find",
      dataType: "json",
      data: {
        term: request.term
      },
      error: function(xhr, textStatus, errorThrown) {
        alert('Error: ' + xhr.responseText);
      },
      success: function(data) {
        console.log('data: ' + data.brand.name + ' - ' + data.name);
        //Outputs: apple - iphone
        response($.map(data, function(product) {
          return {
            label: product.brand.name + " - " + product.name,
            value: product.id //<---------- assign product id
          };
        }))
      }
    });
  },
  select: function(event, ui) {
     $(this).val(ui.item.label); //<----------- assign value of lable

     $(this).attr('data-prod-id', ui.item.value); //<------data-prod-id
     return false; //<------------ to prevent from assign original value

  }

Answer 2

我最终采用这种方法。您似乎必须至少指定标签或值。因此，只要您设置其中一个，就可以在数组中添加额外的必要项目。

response($.map(data, function(product) {
  return {
    id: product.id,
    title: product.brand.name + " - " + product.name,
    value: product.brand.name + "  " + product.name
  };
}))

如何传递更多数据自动完成ajax

2 个答案: