Search code examples
djangosearchfilterviewsearchbar

How to implement a button of the searchbar erasing the query? Django environment)


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>

Solution

  • 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?