在 django 渲染模板中实时搜索

Question

项目详情：-

1. 模板是通过在 django 视图中使用分页来呈现的。
2. 我在 Templete 中使用了 for 循环（仅适用于包含 td 的 tr ）来显示 html 表中的所有结果。
3. 在表格标签下方的模板中添加分页逻辑。
4. 表格中有各种列。

我想对 django 渲染的表实现实时搜索功能。 另外，我应该从所有页面进行搜索。并且只应显示包含搜索框中该字符串的条目。

Answer 1

您可以使用 htmx 以非常直接的方式实现这一点。 遵循 3 个步骤：

• 将表格提取到单独的文件中，并使用 django 的 include 模板标记将其包含在页面中。

• 在您的视图中检查请求是由 HTMX 还是由 django 发出（有一个 django-htmx 包可以为您完成此操作），并仅渲染其中包含项目的表格或相应的整个页面。

• 修改您的搜索输入以使用 htmx 并使用 ajax 将更改提交到您的视图。

在这个存储库中有一个使用 django-htmx 的工作示例。

按照以下步骤完成： 第 1 步（在您的模板中）

<div class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-content">
                <div id="beers-table">
                    {% include "beers/includes/beers-table.html" %}
                </div>
            </div>
        </div>
    </div>
</div>

第 2 步（在您看来）

def active_search(request):
    query = request.GET.get("q")
    page = request.GET.get("p", 1)
    template = "beers/active-search.html"
    if request.htmx:
        template = "beers/includes/beers-table.html"
    if query:
        beers = Beer.objects.search(query)
    else:
        beers = Beer.objects.all().prefetch_related("style", "category")
    return render(
        request,
        template,
        {
            "beers": Paginator(beers, 10).get_page(page),
            "page": page,
            "query": query,
            "not_found": not beers.exists(),
        },
    )

第 3 步（您的搜索表单）

<form action="{% url 'beers:active-search' %}" method="get" class="form-group col-md-6">
    <label class="control-label">
        Search
        <img class="htmx-indicator" id="indicator"  src="{% static 'img/indicator.svg' %}">
    </label>
    <input 
        placeholder="Begin Typing To Search..." 
        data-hx-get="{% url 'beers:active-search' %}" 
        data-hx-trigger="keyup[target.value.length > 3 || target.value.length === 0] changed delay:500ms" 
        data-hx-target="#beers-table"
        data-hx-push-url="true"
        data-hx-indicator="#indicator"
        style="background:#fafafa" 
        class="form-control" 
        type="text"
        value="{{query|default:''}}"
        name="q" />
</form>