Результаты из динамической строки поиска не отображаются на моей странице?

Кто-нибудь знает, в чем проблема?

Код:

                <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')

par не является допустимым html-тегом.

Проверили ли вы свой домен, добавляется ли что-нибудь?

В дополнение к изменению search.js, как показано ниже, я переместил форму и div за пределы nav-bar, в котором они находились. Теперь все работает.

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";
        });
    }
}
Вернуться на верх