Twitter Typeahead/Bloodhound Vorschläge von Ajax-Source: Wie man mehrere Werte verwaltet?

Question

Ich verwende typeahead/Bluthund für Anregungen von einer Ajax-Quelle ziehen:

var protags = new Bloodhound({ 
datumTokenizer: function(protags) { 
return Bloodhound.tokenizers.whitespace(protags.value); 
}, 
queryTokenizer: Bloodhound.tokenizers.whitespace, 
remote: { 
url: '/ajax/getinfo.php?q=%QUERY', 
wildcard: '%QUERY', 
filter: function(response) {  
return response.protags; 
} 
} 
}); 

JSON Ergebnis aus getinfo.php sieht wie folgt aus:

{ 
"protags": [ 
{"tag": { 
"tagid": "1", 
"tagtitle": "titleone"} 
}, 
{"tag": { 
"tagid": "2", 
"tagtitle": "titletwo"} 
}, 
{"tag": { 
"tagid": "3", 
"tagtitle": "titlethree"} 
}]} 

ich in der Lage bin, alle Informationen retrieve ich will (tagtitle uND MarkierungslD) und zeigen sie es mit:

$('.typeahead').typeahead(
{ hint: true, 
highlight: true, 
minLength: 1 
}, 
{ 
name: 'protags', 
displayKey: function(protags) { 
return protags.tag.tagtitle+'-'+protags.tag.tagid; 
}, 
source: protags.ttAdapter() 
}); 

Aber ich bin verwirrt darüber: wie kann ich zeigen nur die tagtitle im su Gaging-Feld, aber die protags.tag.tagid auch für mehr serverseitige Aktionen bekommen?

Answer 1

Verwenden Sie das Ereignis: select (v 0.11.x) oder: ausgewähltes Ereignis (v.0.10.x). Lesen Sie den Bluthund/typeahead docs, da sie eine Menge Veränderungen zwischen 0.10.x und 0.11.x

gemacht

ich 0.10.5 bin mit und in meinem Fall sieht es wie folgt aus:

EDIT: Blick auf Ihrem json, ich bin mir nicht sicher, welche Daten in die Vorlage einfließen und: ausgewählte Funktion. Möglicherweise müssen Sie data.protags.tag usw. verwenden

$(selector).typeahead(
    // options, key, source etc 

    templates: { 
     suggestion: function (data) { 
      return '<div class="tt-name">' + data.tag.tagtitle + '</div>'; 
     } 
    } 
    // end of options 
) 
.on('typeahead:selected', 
    function(event, data) { 
    // you should be able to get your data here, if I'm correct like so: 
    console.log(data.tag.tagid); 
    } 
);