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

【问题标题】：How to pass more data autocomplete ajax如何传递更多数据自动完成ajax
【发布时间】：2017-02-18 04:05:44
【问题描述】：

这是我的产品数据及其各自的品牌详细信息（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">

【问题讨论】：

标签： javascript jquery ajax jquery-ui autocomplete

【解决方案1】：

您可以取不同的“值”和“标签”键值，然后在选择事件时分配值。

例子：

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

  }

【讨论】：

【解决方案2】：

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

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

【讨论】：