diff options
Diffstat (limited to 'data/templates/index.html')
| -rw-r--r-- | data/templates/index.html | 22 |
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> |