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对象数组时，建议下拉列表中的数据会按其编写的方式进行格式化，例如：＆＃39; Apple - iPhone＆＃39;。

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）放入同一输入的某些数据属性中，因此我捕获了事件并记录了选择的建议＆＃39;用户所用的。

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

问题在于它并没有让我访问完整的数据集，因为它在血腥部分的地图函数中专门格式化

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

如果工作正常，请告诉我？

如何在typeahead中访问此对象？

1 个答案: