Как получить доступ к этому объекту в typeahead?

Question

Я использую twitter typeahead с Laravel 5.3. Только так вы знаете, вот мои данные для продукта и вместе с его производителем марки (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 массив получает отображается в массив объектов JS называется value, данные в предложении выпадающего списка форматируется так, как написано, например «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, в некоторых атрибутов данных на одном входе, так что я захватил событие и вошли в «выбранное предложение 'что пользователь взял.

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

Проблема заключается в том, что она не дает мне доступ к полному массиву данных, потому что он отформатирован специально в функции карты от Bloodhound части

// 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], потому что я не доступ к нему еще в отличие от ранее.

Как я могу получить доступ к объекту и отформатировать его правильно и сохранить доступ к идентификатору и идентификатору продукта? Это происходит потому, что позже, когда я отправлю форму, я могу сопоставить выбранный идентификатор продукта с элементами моей таблицы продуктов.

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

Дайте мне знать, если все будет хорошо?