Django中JQuery UI Autocomplete Ajax调用后无法正常显示结果

问题描述 #

在Django应用中实现jQuery UI Autocomplete自动补全功能时，后端视图已返回正确的JSON结果，但前端下拉框始终无法正常显示内容。

后端视图代码 #

@require_POST
@login_required
def search_players(request):
    search_query = request.POST.get('search_query')
    team_ids = request.POST.getlist('team_ids[]')
    players = PlayerData.player.filter(name__icontains=search_query, current_team_id__in=team_ids)
    results = [{'id': player.id, 'name': player.name} for player in players]
    return JsonResponse({'results': results})

后端返回格式 #

{"results": [{"id": 317144, "name": "Sharne Mayers"}]}

前端Autocomplete代码 #

$('#player-search').autocomplete({
    source: function(request, response) {
        $.ajax({
            url: 'search-players/',
            method: 'POST',
            headers: {"X-CSRFToken": csrftoken},
            data: {
                'search_query': request.term,
                'team_ids[]': [$("#team-one-info").data("team-id"),$("#team-two-info").data("team-id")]
            },
            dataType: 'json',
            success: function(data) {
                console.log(data.results)
                response(data.results);
            }
        });
    },
    minLength: 3,
    select: function(event, ui) {
        var selectedPlayers = $('#selected-players');
        var selectedPlayersIds = $('#selected-players-ids');
        var playerPill = $('<span class="badge badge-pill badge-primary ml-1"></span>');
        playerPill.text(ui.item.name);
        playerPill.data('player-id', ui.item.id);
        selectedPlayers.append(playerPill);
        var playerIds = selectedPlayersIds.val().split(',');
        playerIds.push(ui.item.id);
        selectedPlayersIds.val(playerIds.join(','));
        $(this).val('');
        return false;
    }
});

已完成的排查操作 #

• 通过console.log确认Ajax请求返回了正确的data.results数据
• 已加载jQuery UI相关CSS文件：

<link rel="stylesheet" href="/static/css/jquery-ui.min.css">
<link rel="stylesheet" href="/static/css/jquery-ui.structure.min.css">
<link rel="stylesheet" href="/static/css/jquery-ui.theme.min.css">

• 尝试修改success回调为success:response、使用map函数处理结果，均无效果

解决方案 #

1. 修正jQuery与jQuery UI的加载顺序 #

必须先加载jQuery核心库，再加载jQuery UI库，顺序错误会导致Autocomplete功能失效。确保页面脚本加载顺序如下：

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery-ui.min.js"></script>

2. 匹配jQuery Autocomplete的字段要求 #

jQuery UI Autocomplete默认要求每个选项对象包含label或value字段（至少一个），当前返回的name字段无法被自动识别，可通过两种方式修复：

方法一：后端修改返回字段

调整视图中的结果生成代码，添加label和value字段：

results = [{'id': player.id, 'label': player.name, 'value': player.name} for player in players]

方法二：前端映射字段

在Ajax的success回调中手动将name映射为label和value：

success: function(data) {
    var formattedResults = data.results.map(function(item) {
        return {
            id: item.id,
            label: item.name,
            value: item.name
        };
    });
    response(formattedResults);
}

3. 排查CSS冲突或遮挡问题 #

页面中其他框架（如Bootstrap）的CSS可能与jQuery UI样式冲突，导致下拉框被隐藏或遮挡：

• 强制设置Autocomplete下拉框的显示层级：

.ui-autocomplete {
    z-index: 9999 !important;
    display: block !important;
}

• 使用appendTo选项指定下拉框的父元素，避免被其他元素覆盖：

$('#player-search').autocomplete({
    // 其他配置项...
    appendTo: '#player-search-container' // 替换为搜索框所在容器的ID
});

4. 验证CSRF令牌的正确性 #

确认csrftoken变量已正确获取Django生成的令牌：

var csrftoken = $('[name=csrfmiddlewaretoken]').val();

同时确保页面中存在Django自动渲染的CSRF令牌输入框：

{% csrf_token %}

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