动态搜索栏的结果未显示在我的页面上？答案

【问题标题】：Results from dynamic search bar not showing up on my page?动态搜索栏的结果未显示在我的页面上？
【发布时间】：2021-11-08 01:16:21
【问题描述】：

所以，我正在制作一个动态搜索栏，一切都按预期工作（从 Django 获取结果，将其转换为 JSON，JS 接收 JSON 等），除了将结果转换为 HTML这页纸。我不确定我应该怎么做才能让结果真正显示在网页上，而不仅仅是在控制台上？

代码：

                <form class="d-flex" method="POST">
                  {% csrf_token %}
                  <input class="form-control me-2" type="search" id='search' placeholder="Search for books via their titles" aria-label="Search" >
                  <div id="results" style="display: none;">

                  </div>
              </form>

document.addEventListener("DOMContentLoaded", () => {
    // TODO: Implement Search Mechanic
    const search = document.querySelector("#search");
    if (search !== null)
    {
        search.onkeyup = () => {
            console.log(search.value);
            get_results(search.value);
        };
    }
});

function get_results(query)
{
    //TODO Create API to get results
    if (query === null)
    {
        return []
    }
    if (query !== "")
    {
        fetch(`/results/${query}`)
        .then(response => response.json())
        .then(result => {
            console.log(result);
            const display_div = document.querySelector("#results");
            display_div.style.display = "block";
            result.forEach(query => {
                console.log(query);
                const par = document.createElement("par");
                const a = document.createElement("a");
                a.classList.add = "links";
                a.textContent = query.name;
                a.href = "#";
                par.appendChild(a);
                display_div.appendChild(par);
            });
        });
    }
}

@login_required
def results(request, query):
     if request.method == "GET":
          if query is not None:
               results = Search(query).get_results()
               print(results)
               JsonResponse({"message": f"query {query} successful"}, status=200)
               response = serializers.serialize("json", results)
               return HttpResponse(response, content_type='application/json')

【问题讨论】：

标签： javascript django ajax twitter-bootstrap django-templates

【解决方案1】：

par 不是有效的 html 标记。

你检查了你的 dom，有没有附加任何东西？

【讨论】：

是的，我不小心打错了元素，但问题仍然存在。它只是将作者的姓名附加到栏上，甚至没有呈现为链接。而且我的 JS 似乎不想正确访问从 Django 返回的 JSON。

【解决方案2】：

除了像下面这样更改 search.js 之外，我将表单和 div 移到了它们所在的导航栏之外。现在一切正常。

document.addEventListener("DOMContentLoaded", () => {
    const search = document.querySelector("#search");
    const display_div = document.querySelector("#results");
    if (search !== null)
    {
        search.onkeyup = (e) => {
            display_div.style.display = "none";
            if (e.key !== " " || e.key !== "Enter")
            {
                get_results(search.value);
            }
        };
        document.addEventListener("click", (e) => {
            if (e.target !== 'a.nav-link') {
                display_div.style.display = "none";
            }
        });
    }
});

function get_results(query)
{
    if (query === null || query.length < 3)
    {
        return []
    }
    if (query !== "")
    {
        fetch(`/results/${query}`)
        .then(response => response.json())
        .then(result => {
            console.log(result);
            const a = document.createElement("a");
            const display_div = document.querySelector("#results");
            display_div.innerHTML = "";
            result.forEach(query => {
                console.log(query);
                a.setAttribute("class", "nav-link");
                a.textContent = query.fields.name;
                link = `book/view/${query.pk}`
                a.href = `http://127.0.0.1:8000/${link}`;
                a.onclick = () => {
                    window.location.href = `http://127.0.0.1:8000/${link}`;
                };
                display_div.appendChild(a);
            });
            display_div.style.display = "block";
        });
    }
}

【讨论】：