{% extends "index.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"); function filter_name(str) { str = str.toLowerCase(); 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++) { let name = articles[i].getElementsByTagName("h3")[0].innerHTML.toLowerCase(); if (!name.includes(str)) { articles[i].style.display = "none"; } else { articles[i].style.display = "flex"; } } } } </script> {% endblock script %}