Implement search bar on index page

This is way it is way easier to filter recipes by name.

1 files changed, 21 insertions, 1 deletions

diff --git a/data/templates/index.html b/data/templates/index.html
index ab6c243..0b97187 100644
--- a/data/templates/index.html
+++ b/data/templates/index.html
@@ -16,7 +16,8 @@
 
 		<main>
 			<p>Here are the available recipes 😋🍳🍔🍕🥘</p>
-			<ul>{{range .}}
+			<input id="search" onkeyup="filter()" type="text" placeholder="Search for a recipe ..."></input>
+			<ul id="recipes">{{range .}}
 				<li><a href="./recipe?id={{.Id}}">{{.Title}}</a></li>{{end}}
 			</ul>
 
@@ -24,6 +25,25 @@
 
 		</main>
 
+		<script>
+			function filter() {
+				var input, query, ul, li, a, i, txtValue;
+				input = document.getElementById('search');
+				query = input.value.toUpperCase();
+				ul = document.getElementById("recipes");
+				li = ul.getElementsByTagName('li');
+
+				for (i = 0; i < li.length; i++) {
+					a = li[i].getElementsByTagName("a")[0];
+					txtValue = a.textContent || a.innerText;
+					if (txtValue.toUpperCase().indexOf(query) > -1) {
+						li[i].style.display = "";
+					} else {
+						li[i].style.display = "none";
+					}
+				}
+			}
+		</script>
 	</body>
 
 </html>