jQueryUI 的自动完成不理解 JSON？答案

【问题标题】：jQueryUI's Autocomplete doesn't understand JSON?jQueryUI 的自动完成不理解 JSON？
【发布时间】：2012-11-20 22:11:25
【问题描述】：

我有这个 JSON 数组：

[
    {"name":"Mario Kart Wii"},
    {"name":"Super Mario Galaxy 2"},
    {"name":"Super Mario Galaxy"},
    {"name":"Mario Sports Mix"},
    {"name":"Mario & Sonic at the Olympic Winter Games"}
]

非常简单。

还有我的 jQuery 代码：

$('#searchFieldGame').autocomplete({
        source: function(request, response) {
            console.log(response)
            $.getJSON('/index.php/search/autocomplete/'+request['term'],response)
        },
        select: function(event, ui) {
            $('#searchFieldGame').val(ui.item.value);
            $('#searchFormGame').submit()
        },
        minLength: 3
    })

我的问题是 - 当 JSON 更简单时，例如：

[
    "Mario Kart Wii",
    "Super Mario Galaxy 2",
    "Super Mario Galaxy",
    "Mario Sports Mix",
    "Mario & Sonic at the Olympic Winter Games"
 ]

效果很好。但如果它更像第一个，它不会得到任何结果。我需要像第一个一样保持它，因为我希望以后每个数组中都有更多元素。

【问题讨论】：

我不遵循关于“我希望以后在每个数组中包含更多元素”的 cmets。您可以拥有任意数量的数组元素，只需根据可接受的格式对它们进行键控（或不使用键）。

标签： jquery json jquery-ui

【解决方案1】：

对于 jQuery UI 自动完成，只有两种可接受的数据格式。

['item', 'item2', 'item3', ...]
[{label: 'item', value: 'itemvalue'}, {label: 'item2', value: 'itemvalue2'}, ... ]

【讨论】：

这是 2 种格式，但如果需要，它允许您添加其他属性 - 我通常添加“id”以及“label”和“value”
@KevinB 和 Scott - 好主意。这些格式实际上并没有反映在官方文档中。
@MikeBrant 哦，但他们是！ api.jqueryui.com/autocomplete/#option-source “如果只指定了一个属性，它将同时用于这两个属性，例如，如果您只提供值属性，则该值也将用作标签。” 至于其他属性，这只是由于对象的工作方式。其他属性不会导致它中断，它们只会被忽略。但你知道的。

【解决方案2】：

如果它是一个对象数组，它必须至少具有值和/或标签属性。 source

[
    {"value":"Mario Kart Wii"},
    {"value":"Super Mario Galaxy 2"},
    {"value":"Super Mario Galaxy"},
    {"value":"Mario Sports Mix"},
    {"value":"Mario & Sonic at the Olympic Winter Games"}
]

如果这不是一个选项，您可以使用$.map 来修复它。

$.getJSON('/index.php/search/autocomplete/'+request['term'],function(data){
    response( $.map(data,function(obj) {
        return obj.name;
    }) );
});

【讨论】：