I am developing a webapp in Django.
I developed a nice search bar with two buttons.
One of these (fa fa-search) is to search and display the results of the database, and it is altrady working.
I would like that, when my user clicks on the other one (fa fa-trash), the code erases the query and reloads all the unfiltered results.
How do I do it? Here is my code:
in views.py:
def glossario(request):
query = request.GET.get('q')
template = "glossario.html"
# query apply
if query:
query = request.GET.get('q') #q è variabile risultante dalla query del database
selected_entries = glossary_entry.objects.filter(Q(Lemma_it__icontains=query))
return render(request, template, {'all_entries':selected_entries})
# no query
else:
all_entries = glossary_entry.objects.all
return render(request, template, {'all_entries':all_entries})
in glossario.html:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
<a id="pulsante_ricerca_avanzata" href="#Ricerca_avanzata">Ricerca avanzata</a>
<div id="blocco_ricerca_semplice" class="search-container">
<form method="GET" action="{% url 'glossario' %}">
<input type="text" placeholder="Ricerca terminologia..." name="q" value="{{request.GET.q}}">
<button id="cancel_search_button" type=""><i class="fa fa-trash"></i></button>
<button id="search_button" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
I solved it by implementing a Javascript function erasing the text inside the searchbox as soon as the trash buttn is clicked, then the button executes the query (that has void argument).
in glossario.html:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- questo fa apparire il pulsantino di ricerca -->
<!-- questo fa apparire il pulsantino di ricerca -->
<div class="topnav">
<a id="pulsante_ricerca_avanzata" href="#Ricerca_avanzata">Ricerca avanzata</a>
<div id="blocco_ricerca_semplice" class="search-container">
<form method="GET" action="{% url 'glossario' %}">
<input id="testo_slot_ricerca_semplice" type="text" placeholder="Ricerca terminologia..." name="q" value="{{request.GET.q}}"> <!-- è il nome che ho dato anche nella views.py -->
<!-- name dentro input text vuol dire il sintagma che viene dato all'url di tutte le query, seguito da un = per indicarne il bersaglio' -->
<button id="cancel_search_button" onclick="Delete_simple_search()"><i class="fa fa-trash"></i></button>
<button id="search_button" type="submit"><i class="fa fa-search"></i></button>
</form>
<!--at the end of the page-->
{% load static %}
<script type="text/javascript" src={% static "js/Delete_simple_search.js" %}></script>
In delete_simple_search.js, at path static/js/delete_simple_search.js:
function Delete_simple_search() {
document.getElementById("testo_slot_ricerca_semplice").value="";
}
Does anybody know if there is a more efficient way to erase the query?