receptty.org/templates/search.html

{% extends "base.html" %}

{% block content %}
<main>
	<h2>Hledání a filtry</h2>
	<div class="filters">
		<input type="text" placeholder="Název" id="input">
	</div>
	<section class="list">
		{% set section = get_section(path="_index.md") %}
		{% for page in section.pages %}
			{{ macro::print_recipe(recipe=page) }}
		{% endfor %}
	</section>
</main>
{% endblock content %}

{% block script %}
<script>
let input = document.getElementById("input");
input.oninput = function() { filter_name(input.value) };
let articles = document.getElementsByTagName("article");

for (let i=0; i<articles.length; i++) {
	articles[i].dataset.title = articles[i].dataset.title.normalize("NFD").replace(/\p{Diacritic}/gu, "");
}

function filter_name(str) {
	str = str.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");

	if (str.length==0) {
		for (let i=0; i<articles.length; i++) {
			articles[i].style.display = "flex";
		}
	} else {
		for (let i=0; i<articles.length; i++) {
			articles[i].style.display = !articles[i].dataset.title.includes(str) ? "none" : "flex";
		}
	}
}
</script>
{% endblock script %}