javascript - 如何在预输入中访问该对象？

Question

我在 Laravel 5.3 中使用 twitter typeahead。请注意，这是我的产品数据及其制造商品牌 (FK):

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

当远程源 JSON 数组映射到名为 value 的 js 对象数组时，建议下拉列表中的数据将按照其写入方式进行格式化，例如“苹果 - iPhone”。

var engine = new Bloodhound({
  datumTokenizer: function(datum) {
    return Bloodhound.tokenizers.whitespace(datum.value);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    wildcard: '%QUERY',
    url: '/find?q=%QUERY%',
    transform: function(response) {
    console.log(response);
      // Map the remote source JSON array to a JavaScript object array
      return $.map(response, function(product) {
        return {
          value: product.brand.name+' - '+product.name,
          other: product
        };
      });
    }
  }
});

// Instantiate the Typeahead UI
$('#search').typeahead( null,{
  display: 'value',//choose a key from the map
  highlight: true,
  hint: true,
  source: engine
});

我还想做的是将 1 的 brand.id 和 2 的 product.id 转换为相同的输入，因此我捕获了该事件并记录了用户采取的“所选建议”。

$("#search").on("typeahead:select", function(ev, suggestion) {
    console.log(suggestion);
});

问题是它不允许我访问完整的数据数组，因为它是在 Bloodhound 部分的 map 函数中专门格式化的

// Map the remote source JSON array to a JavaScript object array
          return $.map(response, function(product) {
            return {
              value: product.brand.name+' - '+product.name, //this format
              other: product //full access to object
            };
          });

因此，我将 display 切换为 other 而不是 value，以便传递完整对象而不是品牌名称和产品名称。

$('#search').typeahead( null,{
  //display: 'value',
  display: 'other',
  highlight: true,
  hint: true,
  source: engine
});

现在，当下拉列表中出现建议时，它会显示 [object object] 因为我还没有像以前那样访问它。

如何访问该对象并正确格式化它并保持对品牌 ID 和产品 ID 的访问？这样稍后当我提交表单时，我可以将所选产品 ID 与我的产品表项目进行匹配。

Answer 1

虽然，我还没有检查代码，但我在我的项目中可以使用它。试试这个:

var engine = new Bloodhound({
    datumTokenizer: function(datum) {
        var result = Bloodhound.tokenizers.whitespace(datum.name);
        if (datum.brand != null){
            result = result.concat(Bloodhound.tokenizers.whitespace(datum.brand.name));
        }
        return result;
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        wildcard: '%QUERY',
        url: '/find?q=%QUERY%',
        prepare: function(query, settings) {
            settings.type = "GET";
            settings.dataType = "json"
            settings.url = settings.url.replace('%QUERY', encodeURIComponent(query));
            return settings;
        }
    }
});

engine.initialize();

$("#search").typeahead(null, {
    name: 'engine',
    displayKey: function(data){
        return  data.name + (data.brand ? " - " + data.brand.name : "");
    },
    source: engine.ttAdapter(),
})
.on('typeahead:selected', function($e, datum){
    //You may access the value object here
    console.log("datum" ,datum);
});

让我知道是否可以正常工作？