Возвращаемые значения с помощью функции DisplayKey Typeahead в Bootstrap

Я определил собственный шаблон для предложений в Bootstrap Typeahead, как указано ниже. Но когда я выбираю любое из предложений, я получаю на входе только название страны. Поскольку я передал country в параметре displayKey. Могу ли я в любом случае выбрать название страны и города при вводе (так же, как в шаблоне)?

Вот JsFiddle: http://jsfiddle.net/geekowls/agrg3xhj/

Я также прочитал примеры на веб-сайте Typeahead. Но ничего подходящего не нашел. Все, что я знаю, это то, что параметр displayKey может принимать функцию.

$(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>'
                                }
                            }
                        }
                        );
});

Вот JSON-файл.

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

person geekowls    schedule 25.07.2015    source источник


Ответы (1)


Функция была достаточно простой. Просто нужно обновить параметр display как:

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

Также обновлен код скрипки здесь: http://jsfiddle.net/geekowls/agrg3xhj/1/

Ваше здоровье!

person geekowls    schedule 29.07.2015