动态搜索栏已获取Django返回的JSON结果但无法在页面渲染显示如何解决

前端JS问题修复 #

以下是导致渲染失效的核心前端错误，按优先级修复：

• 不存在par这个标准HTML标签，应该创建<p>段落标签
• classList.add是调用方法，不能直接赋值，正确写法为a.classList.add("links")
• Django的serializers.serialize返回的JSON结构中，所有模型字段都存放在fields属性下，直接读取query.name无法拿到值，需要改为query.fields.name
• 新增清空逻辑：每次搜索前先清空上一次的结果，避免内容叠加

修复后的完整JS代码：

document.addEventListener("DOMContentLoaded", () => {
    const search = document.querySelector("#search");
    if (search !== null)
    {
        search.onkeyup = () => {
            get_results(search.value);
        };
    }
});

function get_results(query)
{
    const display_div = document.querySelector("#results");
    if (query === null || query === "")
    {
        // 搜索词为空时隐藏结果框并清空内容
        display_div.style.display = "none";
        display_div.innerHTML = "";
        return []
    }
    fetch(`/results/${query}`)
    .then(response => response.json())
    .then(result => {
        // 清空旧搜索结果
        display_div.innerHTML = "";
        display_div.style.display = "block";
        result.forEach(item => {
            const par = document.createElement("p");
            const a = document.createElement("a");
            a.classList.add("links");
            // 从fields属性中读取字段值
            a.textContent = item.fields.name;
            a.href = "#";
            par.appendChild(a);
            display_div.appendChild(par);
        });
    });
}

后端Django代码优化 #

删除多余的未返回的JsonResponse行，优化空查询的返回逻辑：

@login_required
def results(request, query):
     if request.method == "GET":
          if query:
               results = Search(query).get_results()
               response = serializers.serialize("json", results)
               return HttpResponse(response, content_type='application/json')
          # 空查询返回空数组
          return JsonResponse([], safe=False)

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