nk20/note_kfet/templates/base_search.html

{% extends "base.html" %}
{% comment %}
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load render_table from django_tables2 %}
{% load i18n perms %}
{% block contenttitle %}{% endblock %}

{% block content %}
<div class="card bg-light">
    <h3 class="card-header text-center">
        {{ title }}
    </h3>
    <div class="card-body">
        <input id="searchbar" type="text" class="form-control" placeholder="{% trans "Search by attribute such as name…" %}">
    </div>
    <div id="dynamic-table">
        {% if table.data %}
        {% render_table table %}
        {% else %}
        <div class="card-body">
            <div class="alert alert-warning">
                {% trans "There is no results." %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extrajavascript %}
<script type="text/javascript">
    let pattern = '';

    function reloadTable() {
        pattern = $("#searchbar").val();

        if (pattern.length > 2)
            $("#dynamic-table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #dynamic-table", init_table);
    }

    function init_table() {
        // On row click, go to object
        $(".table-row").click(function () {
            window.document.location = $(this).data("href");
        });

        // Highlight searched terms
        $("tr").each(function () {
            $(this).find("td:eq(0), td:eq(1), td:eq(2), td:eq(3), td:eq(5)").each(function () {
                $(this).html($(this).text().replace(new RegExp(pattern, 'i'), "<mark>$&</mark>"));
            });
        });
    }

    $(document).ready(function () {
        // Recover last search from url
        let searchParams = new URLSearchParams(window.location.search)
        if (searchParams.has('search'))
            pattern = searchParams.get('search');

        // On search, refresh table
        $("#searchbar").keyup(debounce(reloadTable, 300));

        // First init
        init_table();
    });
</script>
{% endblock %}