nk20/note_kfet/templates/base_search.html

78 lines
2.3 KiB
HTML
Raw Normal View History

2020-08-21 21:11:25 +00:00
{% extends "base.html" %}
{% comment %}
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load render_table from django_tables2 %}
{% load i18n perms %}
{% block content %}
<div class="card bg-light">
<h3 class="card-header text-center">
{{ title }}
</h3>
<div class="card-body">
2020-08-22 07:35:55 +00:00
<input id="searchbar" type="text" class="form-control"
placeholder="{% trans "Search by attribute such as name…" %}">
2020-08-21 21:11:25 +00:00
</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">
function init_table() {
// On row click, go to object
$(".table-row").click(function () {
window.document.location = $(this).data("href");
});
// Highlight searched terms
2020-08-22 07:35:55 +00:00
const pattern = $("#searchbar").val();
if (pattern.length > 2) {
$("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>"));
});
2020-08-21 21:11:25 +00:00
});
2020-08-22 07:35:55 +00:00
}
2020-08-21 21:11:25 +00:00
}
$(document).ready(function () {
2020-08-22 07:35:55 +00:00
let pattern = '';
2020-08-21 21:11:25 +00:00
// Recover last search from url
let searchParams = new URLSearchParams(window.location.search)
2020-08-22 07:35:55 +00:00
if (searchParams.has('search')) {
2020-08-21 21:11:25 +00:00
pattern = searchParams.get('search');
2020-08-22 07:35:55 +00:00
}
2020-08-21 21:11:25 +00:00
// On search, refresh table
2020-08-22 07:35:55 +00:00
$("#searchbar").keyup(debounce(function () {
// Get new pattern
pattern = $("#searchbar").val();
// Set URL
searchParams.set('search', pattern);
history.pushState({}, null, "?" + searchParams.toString());
// If long enough, update table
if (pattern.length > 2) {
$("#dynamic-table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #dynamic-table", init_table);
}
}, 300));
2020-08-21 21:11:25 +00:00
// First init
init_table();
});
</script>
2020-08-22 07:35:55 +00:00
{% endblock %}