Return Values ​​Using the Bootstrap Typeahead displayKey Function

Question

I defined a custom template for offers in Bootstrap Typeahead , as follows. But when I select any offers, I get only the name of the country . Since I went country in displayKey . Is there anyway that I can select the name of the country and city in the input (the same as in the template)?

Here is the JsFiddle: http://jsfiddle.net/geekowls/agrg3xhj/

I also read examples on the Typeahead website. But did not find anything suitable. All I know is that the displayKey parameter can take a function.

$(document).ready(function () { var dataSource = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('country', 'city'), queryTokenizer: Bloodhound.tokenizers.whitespace, identify: function (obj) { return obj.country; }, prefetch: "../Data/1.json" }); function dataSourceS(q, sync) { dataSource.search(q, sync); } $('.typeahead').typeahead( { minLength: 0, highlight: true }, { name: 'countries', displayKey: 'country', source: dataSourceS, templates: { empty: [ '<div class="empty">No Matches Found</div>' ].join('\n'), suggestion: function (data){ return '<div>' + data.country + ' – ' + data.city + '</div>' } } } ); }); 

Here is the Json file.

 [ { "country": "Holland", "city": "Amsterdam" }, { "country": "Belgium", "city": "Brussel" }, { "country": "Germany", "city": "Berlin" }, { "country": "France", "city": "Paris" } ] 

Answer 1

The function was quite simple. Just need to update the display parameter as:

 display: function(item){ return item.country+'–'+item.city} 

Also updated the code on the violin: http://jsfiddle.net/geekowls/agrg3xhj/1/

Hooray!