Wie kann ich auf dieses Objekt in typeahead zugreifen?

Question

Ich benutze twitter typeahead mit Laravel 5.3. Nur damit Sie wissen, ist hier meine Daten für ein Produkt und zusammen mit seinem Herstellermarke (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 
    } 
    } 
] 

Wenn der entfernten Quelle JSON-Array mit einem Array js Objekts abgebildet wird aufgerufen value, die Daten in dem Vorschlag Dropdown wird formatiert, wie es geschrieben ist, zB '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 
}); 

Was ich auch gegossen tun wollen die brand.id die 1 wäre, und die product.id die 2 sein würde, in einige Daten auf dem gleichen Eingabeattribute, so erfasst ich das Ereignis und protokolliert, um den ‚ausgewählten Vorschlag 'dass der Benutzer genommen hat.

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

Das Problem ist, dass es mir nicht Zugriff auf das gesamte Array von Daten nicht geben, weil es speziell in der Map-Funktion aus dem Bluthund Teil

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

Also wechselte formatiert ist ich die display-other anstelle von value, so dass das vollständige Objekt anstelle des Markennamens und des Produktnamens übergeben wird.

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

Wenn nun ein Vorschlag in der Dropdown-Liste kommt, wird es [object object] sagen, weil ich es noch nicht zugegriffen haben, anders als zuvor.

Wie kann ich auf das Objekt zugreifen und es richtig formatieren und den Zugriff auf die Marken-ID und Produkt-ID behalten? Dies ist so, dass ich später, wenn ich das Formular absende, die ausgewählten Produkt-IDs mit meinen Produkttabellenelementen abgleichen kann.

Answer 1

Obwohl ich die Codes nicht überprüft habe, aber ich habe dies in meinem Projekt funktioniert. Versuchen Sie dies:

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

Lassen Sie mich wissen, ob funktioniert OK?