Hledání receptů podle názvu

templates/search.html

@@ -4,9 +4,7 @@
 <main>
 	<h2>Hledání a filtry</h2>
 	<div class="filters">
-		<input type="text" id="name" placeholder="Název">
-		<input type="text" id="name" placeholder="Název">
-		<input type="text" id="name" placeholder="Název">
+		<input type="text" placeholder="Název" oninput="filter_name(this.value)">
 	</div>
 	<section class="list">
 		{% set section = get_section(path="_index.md") %}
@@ -16,3 +14,27 @@
 	</section>
 </main>
 {% endblock content %}
+
+{% block script %}
+<script>
+function filter_name(str) {
+	let articles = document.getElementsByTagName("article");
+	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 %}