我怎样才能提前访问这个对象？

Question

我正在通过 Laravel 5.3 使用 Twitter 预输入。提醒一下，这是我的产品数据及其制造商品牌 (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 对象数组时，建议下拉列表中的数据将按照其编写方式进行格式化，例如'Apple - 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
});

我还想做的是将 brand.id 将是 1，将 product.id 将是 2，转换为同一输入的一些数据属性，因此我捕获了事件并记录了用户使用的 'selected suggestion'。

$("#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 与我的产品 table 项目相匹配。

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

让我知道是否工作正常？

我怎样才能提前访问这个对象？

How can I access this object in typeahead?

javascript

laravel

typeahead.js

bloodhound