receptty.org/templates/search.html

37 lines
1.0 KiB
HTML
Raw Normal View History

{% extends "base.html" %}
{% block content %}
<main>
2021-02-02 21:46:24 +01:00
<h2>Hledání a filtry</h2>
<div class="filters">
2021-12-07 18:17:40 +01:00
<input type="text" placeholder="Název" id="input">
2021-02-02 21:46:24 +01:00
</div>
<section class="list">
2021-02-02 22:01:42 +01:00
{% set section = get_section(path="_index.md") %}
{% for page in section.pages %}
{{ macro::print_recipe(recipe=page) }}
{% endfor %}
</section>
</main>
{% endblock content %}
2021-02-02 23:39:29 +01:00
{% block script %}
<script>
2021-12-07 18:17:40 +01:00
let input = document.getElementById("input");
input.oninput = function() { filter_name(input.value) };
2022-12-12 14:59:39 +01:00
let articles = Array.from(document.getElementsByTagName("article"));
2021-12-07 18:17:40 +01:00
2022-12-12 14:59:39 +01:00
articles.forEach(article => article.dataset.title = article.dataset.title.normalize("NFD").replace(/\p{Diacritic}/gu, ""));
2021-02-02 23:39:29 +01:00
function filter_name(str) {
str = str.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
2021-02-02 23:39:29 +01:00
if (str.length==0) {
2022-12-12 14:59:39 +01:00
articles.forEach(article => article.style.display = "flex");
2021-02-02 23:39:29 +01:00
} else {
articles.forEach(article => article.style.display = article.dataset.title.indexOf(str) === -1 ? "none" : "flex");
2021-02-02 23:39:29 +01:00
}
}
</script>
{% endblock script %}