動態搜索欄的結果沒有顯示在我的頁面上？

因此，我正在制作一個動態搜索欄，一切都按計劃進行（從Django獲取結果，將其轉換為JSON，JS接收JSON，等等），除了將結果轉換為頁面上的HTML。我不確定我應該怎么做才能讓結果真正顯示在網頁上，而不是僅僅顯示在控制臺中？

代碼：

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

                  </div>/span>
              </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 創建API以獲取結果。
    if (query === null)
    {
        return [] 。
    }
    if (query !== ""/span>)
    {
        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 = "link";
                a.textContent = query.name;
                a.href = "#"/span>;
                par.appendChild（a）。
                display_div.appendChild（par）。
            });
        });
    }

@login_required
def results(request, query):
     if request.method == "GET":
          if query不是None。
               results = Search(query).get_results()
               print(results)
               JsonResponse({"message": f"query {query} success"}, status=200)
               response = serializers.serialize("json"/span>, results)
               return HttpResponse（ response, content_type='application/json'）。

uj5u.com熱心網友回復：

par不是一個有效的HTML標簽。

你是否檢查了你的dom，是否有什么被附加的東西？

uj5u.com熱心網友回復：

除了像下面這樣修改 search.js 之外，我還把我的表單和 div 移到了它們原來所在的導航欄之外。現在一切都正常了。

span class="hljs-variable language_">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"/span>;
            if (e.key !== " " || e.key !== "enter")
            {
                get_results(search.value) 。
            }
        };
        document.addEventListener("click", (e) => /span>{
            if (e.target !== 'a.nav-link') {
                display_div.style.display = "none" ;
            }
        });
    }
});

function get_results(query)
{
    if (query === null || query.length < 3)
    {
        return [] 。
    }
    if (query !== ""/span>)
    {
        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";
        });
    }

標籤：

上一篇：兩個垂直輸入端共用一個按鈕

下一篇：為什么div.width在clearInterval的if條件下不起作用？