Entonces, estoy creando una barra de búsqueda dinámica y todo funciona como se supone que debe (obtener los resultados de Django, convertirlo a JSON, JS recibe el JSON, etc.), excepto la conversión de los resultados a HTML en la página. No estoy seguro de lo que se supone que debo hacer para que los resultados se muestren en la página web y ya no solo en la consola.

Código:

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