Автозаполнение JQuery: отображение нескольких атрибутов одного и того же объекта JSON в одном поле

Question

Я впервые использую плагин автозаполнения jquery с данными, поступающими из API Rest.Я хочу, чтобы пользователь приложения выбирал город (из отображаемых предложений).Дополнительные поля, соответствующие выбранному городу (например, регион, департамент и т. Д.), Заполняются автоматически на основе объекта JSON, возвращаемого автозаполнением.

Пока все работает отлично.Вот код (чтобы сделать пример более понятным, я жестко закодировал данные):

$(function () {

var data =  [
{
    "codeRegion": "93",
    "codeDepartement": "13",
    "zipCodes": [
        "13001",
        "13002",
        "13003",
        "13004",
        "13005",
        "13006",
        "13007",
        "13008",
        "13009",
        "13010",
        "13011",
        "13012",
        "13013",
        "13014",
        "13015",
        "13016"
    ],
    "nom": "Marseille",
    "code": "13055",
    "_score": 0.515005204471824,
    "departement": {
        "code": "13",
        "nom": "Bouches-du-Rhône"
    },
    "region": {
        "code": "93",
        "nom": "Provence-Alpes-Côte d'Azur"
    }
},
{
    "codeRegion": "76",
    "codeDepartement": "32",
    "zipCodes": [
        "32170"
    ],
    "nom": "Marseillan",
    "code": "32238",
    "_score": 0.4956346463216245,
    "departement": {
        "code": "32",
        "nom": "Gers"
    },
    "region": {
        "code": "76",
        "nom": "Occitanie"
    }
},
{
    "codeRegion": "76",
    "codeDepartement": "34",
    "zipCodes": [
        "34340"
    ],
    "nom": "Marseillan",
    "code": "34150",
    "_score": 0.4956346463216245,
    "departement": {
        "code": "34",
        "nom": "Hérault"
    },
    "region": {
        "code": "76",
        "nom": "Occitanie"
    }
},
{
    "codeRegion": "76",
    "codeDepartement": "65",
    "zipCodes": [
        "65350"
    ],
    "nom": "Marseillan",
    "code": "65301",
    "_score": 0.4956346463216245,
    "departement": {
        "code": "65",
        "nom": "Hautes-Pyrénées"
    },
    "region": {
        "code": "76",
        "nom": "Occitanie"
    }
},
]

    $("#cityNameInput").autocomplete({
    minLength: 3,
    source: function (request, response) {

           response($.map(data, function (value, key) {
                        return {
                            label: value.nom,
                            value: value.nom,
                            region: value.region,
                            departementName: value.departement.nom,
                            code: value.departement.code
                        }
                    }));
                },



        focus: function (event, ui) {
            $("#cityNameInput").val(ui.item.nom);
                      return false;
        },

        select: function (event, ui) {
            $("#cityNameInput").val(ui.item.nom);
            $("#region").val(ui.item.region.nom);
            $("#departementName").val(ui.item.departementName);
            $("#departementId").val(ui.item.code);
            return false;
        }
    })
});

У меня есть только одна проблема: - как вы видите, разные города могут иметь одно и то же имя (в этом примере их 2 "Марсельян ") - далее: крупные города, такие как" Марсель ", подразделяются на разные районы, каждый из которых имеет свой собственный почтовый индекс.

Итак, что я хотел бы сделать, так это иметь в предложениях автозаполнения-пишите не только название отображаемых городов, но и дополнительную информацию, такую ​​как почтовый индекс.Так что каждое предложение очень уникально.

Я пробовал разные вещи, но не мог заставить его работать.Может ли кто-нибудь помочь мне в этом вопросе?

Вот ссылка на скрипку: http://jsfiddle.net/cg285qwp/

Answer 1

Вы можете сделать что-то подобное в автозаполнении источника

source: function (request, response) {

           response($.map(data, function (value, key) { 
           var response_array = [];
             $.each(value.zipCodes,function()
             {
                response_array.push(
                  {
                    label: value.nom+" zip:"+this,
                    value: value.nom,
                    region: value.region,
                    departementName: value.departement.nom,
                    code: value.departement.code
                  }
                            );
                            });
            return response_array;
      }));
 },

Здесь метка соединена с почтовым индексом, пожалуйста, отметьте