JQuery 自动完成：在一个字段中显示同一个 JSON 对象的多个属性

Posted 2023-05-08

【中文标题】JQuery 自动完成：在一个字段中显示同一个 JSON 对象的多个属性

【英文标题】：JQuery autocomplete: display several attributes of a same JSON object in one field

【发布时间】：2019-07-15 06:36:20

【问题描述】：

我第一次使用来自 API Rest 的数据的 jquery 自动完成插件。我希望应用程序的用户选择一个城市（从显示的建议中）。与所选城市匹配的其他字段（如地区、部门等）将根据自动完成返回的 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 个“Marseillan”） - 进一步：像“马赛”这样的大城市被细分为不同的地区，每个地区都有自己的邮政编码。

所以我想做的是，在自动完成建议列表中不仅显示城市的名称，还包括邮政编码等附加信息。这样每一个提案都非常独特。

我尝试了不同的方法，但无法成功。 有人可以帮我解决这个问题吗？

这里是小提琴的链接： http://jsfiddle.net/cg285qwp/

【问题讨论】：

你想看到这样的：Marseille: zip-13 在下拉列表中？

【参考方案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;
      ));
 ,

这里的标签是与邮政编码连接的，请检查

【讨论】：

您好，感谢您的回答。我希望看到：“Marseille 13001”、“Marseille 13002”... 13001 和 13002 是马赛市可能的邮政编码之一。您的建议不起作用，因为“value.code”指的是另一个代码，而不是邮政编码。一个城市可以有多个邮政编码，它们存储在一个嵌套数组中（请参阅我的帖子中 JSON 对象的结构）。

您想要 zip 中的所有记录吗？很多人都想要 zip 的所有记录吗？

用户应该在不同的 zip 中做出选择，因为在我的业务逻辑的最后，我需要一个只有一个 zip 的城市。为了实现这一点，我每次都希望在自动完成字段的建议列表中出现（city_name + 1 zip）。因此，如果同一个城市有 3 个不同的邮政编码，它应该在建议列表中出现 3 次，每次使用不同的邮政编码。如果这不可能或太复杂，另一种选择可能是让用户首先选择一个具有自动完成功能的城市，然后在 html 选择表单中填充所有匹配的邮政编码。

@JulienBerthoud 我已经更新了代码，请检查。