36 lines
1.4 KiB
HTML
36 lines
1.4 KiB
HTML
<div class="search-box me-2">
|
|
<form class="position-relative show" id="search-form">
|
|
<input name="q"
|
|
id="search-input"
|
|
class="form-control form-control-sm search-input search"
|
|
type="search"
|
|
aria-label="Search"
|
|
placeholder="{{ _("Search...") }}"
|
|
value="{{ request.GET.q }}" />
|
|
<span class="fa fa-magnifying-glass search-box-icon"></span>
|
|
{% if request.GET.q %}
|
|
<button type="button"
|
|
class="btn-close position-absolute end-0 top-50 translate-middle cursor-pointer shadow-none"
|
|
id="clear-search"
|
|
aria-label="Close"></button>
|
|
{% endif %}
|
|
</form>
|
|
</div>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const searchInput = document.getElementById("search-input");
|
|
const clearButton = document.getElementById("clear-search");
|
|
|
|
if (clearButton) {
|
|
clearButton.addEventListener("click", function(event) {
|
|
event.preventDefault();
|
|
searchInput.value = ""; // Clear input field
|
|
// Remove query parameter without reloading the page
|
|
const newUrl = window.location.pathname;
|
|
history.replaceState(null, "", newUrl);
|
|
window.location.reload();
|
|
});
|
|
}
|
|
});
|
|
</script>
|