JQuery Autocomplete无法处理复杂结构JSON数据的问题

我基于jQuery官网示例实现的jQuery Autocomplete组件，能正常处理URL返回的纯字符串数组格式JSON：

[
    "shirt",
    "shirt two"
]

但无法处理URL返回的对象数组格式JSON：

[
{
    "id": 1,
    "name": "shirt"
},
{
    "id": 5,
    "name": "shirt two"
}
]

我的jQuery代码如下：

<script>
$(function(){
    $('#searchbox').autocomplete({
        type: "GET",
        source:'{% url 'ajitemsdetails' %}',
        minLength: 3,
        select: function( event, ui ) {                  
            $('#data').append('<tr><td></td><td>'+ui.item.name+'</td><td></td><td></td><td></td><tr>');
    }})
});
</script>

请问如何修改代码适配这种复杂结构的JSON数据？

Autocomplete默认只识别纯字符串数组，或包含label/value属性的对象数组。要适配你的对象数组格式，只需把返回数据里的name字段映射到组件能识别的字段即可，以下两种方案任选：

方案1：通过response事件统一转换数据格式 #

无需重写AJAX请求，直接在组件回调里处理返回数据：

<script>
$(function(){
    $('#searchbox').autocomplete({
        type: "GET",
        source:'{% url 'ajitemsdetails' %}',
        minLength: 3,
        // 聚焦选项时，让输入框显示name字段
        focus: function(event, ui) {
            $('#searchbox').val(ui.item.name);
            return false;
        },
        select: function( event, ui ) {                  
            $('#data').append('<tr><td></td><td>'+ui.item.name+'</td><td>'+ui.item.id+'</td><td></td><td></td></tr>');
            $('#searchbox').val(ui.item.name);
            return false;
        },
        // 把后端返回的对象数组转换成组件能识别的格式
        response: function(event, ui) {
            ui.content = ui.content.map(item => ({
                label: item.name, // 下拉列表显示的文本
                value: item.name, // 输入框填充的文本
                ...item // 保留原对象的所有属性，方便后续使用
            }));
        }
    })
});
</script>

方案2：自定义source函数手动处理请求 #

如果需要给后端传递额外参数，或更灵活控制请求逻辑，可把source改为函数：

<script>
$(function(){
    $('#searchbox').autocomplete({
        minLength: 3,
        source: function(request, response) {
            $.ajax({
                url: '{% url 'ajitemsdetails' %}',
                type: 'GET',
                data: {
                    term: request.term // 把输入框的关键词传给后端
                },
                success: function(data) {
                    // 转换数据格式
                    const formattedData = data.map(item => ({
                        label: item.name,
                        value: item.name,
                        id: item.id,
                        name: item.name
                    }));
                    response(formattedData);
                }
            });
        },
        select: function( event, ui ) {                  
            $('#data').append('<tr><td></td><td>'+ui.item.name+'</td><td>'+ui.item.id+'</td><td></td><td></td></tr>');
            $('#searchbox').val(ui.item.name);
            return false;
        }
    })
});
</script>

核心说明 #

• 组件默认会读取label作为下拉选项的显示文本，value作为输入框填充的内容，所以必须把你的name字段映射到这两个属性上。
• focus事件用来覆盖默认行为，避免聚焦选项时输入框显示不符合预期的内容。
• 两种方案都保留了原对象的id和name属性，方便在select事件中使用这些数据。

内容的提问来源于stack exchange，提问作者Bineesh Kumar