33 lines
1.2 KiB
HTML
33 lines
1.2 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);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|