So, I'm making a dynamic search bar and everything works as it's supposed to (getting the results from Django, converting it to JSON, JS receives the JSON, etc.), except the conversion of the results to HTML on the page. I'm not sure what I'm supposed to do to have the results actually show on the web page and not just on the console anymore?
Code:
<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 is not a valid html tag.
Did you inspect your dom, is anything being appended?
In addition to changing search.js like below, I moved my form and div outside of the nav-bar they were in. Everything is working now.
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";
});
}
}