如何实现删除查询的搜索栏按钮？ Django环境）

Posted 2023-02-26

【中文标题】如何实现删除查询的搜索栏按钮？ Django环境）

【英文标题】：How to implement a button of the searchbar erasing the query? Django environment)

【发布时间】：2019-09-20 13:23:05

【问题描述】：

我正在用 Django 开发一个 webapp。 我开发了一个带有两个按钮的漂亮搜索栏。

其中一个（fa fa-search）是搜索和显示数据库的结果，它一直在工作。

我希望这样，当我的用户点击另一个（fa fa-trash）时，代码会删除查询并重新加载所有未过滤的结果。

我该怎么做？ 这是我的代码：

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

在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>

【参考方案1】：

我通过实现一个 javascript 函数来解决这个问题，一旦点击垃圾按钮，就会删除搜索框中的文本，然后按钮执行查询（具有 void 参数）。

在 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>

在delete_simple_search.js中，路径static/js/delete_simple_search.js：

function Delete_simple_search() 

    document.getElementById("testo_slot_ricerca_semplice").value="";

有人知道是否有更有效的方法来删除查询吗？

【讨论】：

将您的垃圾箱 button 更改为 a 标记并引用同一页面，例如 % url 'your_url' %