diff options
author | Luke Smith <luke@lukesmith.xyz> | 2022-05-26 23:58:53 +0000 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-05-26 23:58:53 +0000 |
commit | b7f117cf4c59c0360156de16c2ba1c1ebd5602f0 (patch) | |
tree | 0758bdddf8d01e58fda5dff4f77ca87ff2a8993f /content | |
parent | 0a837fb26acfa5c1ba8d910984d19963f1e0cfa4 (diff) |
Filter Articles with a Javascript Search (#772)
* for lugo changes
* quick search through recipes
* Update content/_index.md
Co-authored-by: Steven Hall <Hallzy.18@gmail.com>
* Update content/_index.md
Co-authored-by: Steven Hall <Hallzy.18@gmail.com>
* when searching, list one column, big results
* Update content/_index.md
Co-authored-by: Steven Hall <Hallzy.18@gmail.com>
* Update content/_index.md
Co-authored-by: Steven Hall <Hallzy.18@gmail.com>
* Update content/_index.md
Co-authored-by: Steven Hall <Hallzy.18@gmail.com>
* change for my naming
* remove for fix
* redundant
* hide tags in items so search sees tags
* last superficial changes
Co-authored-by: Steven Hall <Hallzy.18@gmail.com>
Diffstat (limited to 'content')
-rw-r--r-- | content/_index.md | 54 |
1 files changed, 51 insertions, 3 deletions
diff --git a/content/_index.md b/content/_index.md index e06deb1..53c9e99 100644 --- a/content/_index.md +++ b/content/_index.md @@ -2,14 +2,62 @@ title: "🍲 Based Cooking 🍳" --- -## Categories +## What do you want to cook? -{{< tagcloud >}} +<div class="search"> + <input type="text" id="search" placeholder="Search..."> + <button class="clear-search"> + <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Backspace</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg> + </button> +</div> + +<script> +document.addEventListener('DOMContentLoaded', () => { + const rec = document.querySelectorAll('#artlist li') + const search = document.querySelector('#search') + const clearSearch = document.querySelector('.clear-search') + const artlist = document.getElementById('artlist') + + search.addEventListener('input', e => { + // grab search input value + const searchText = e.target.value.toLowerCase() + + const hasFilter = searchText.length > 0; + + // for each recipe hide all but matched + let matchCount = 0; + rec.forEach(el => { + const recipeName = el.innerText.toLowerCase() + const isMatch = recipeName.includes(searchText) + + el.hidden = !isMatch + el.classList.toggle('matched-recipe', isMatch && searchText.length !== 0); + if (hasFilter && isMatch) { + matchCount++; + } + }) -## All Recipes + artlist.classList.toggle('list-searched', matchCount > 0); + }) + + clearSearch.addEventListener('click', e => { + search.value = '' + rec.forEach(el => { + el.hidden = false + el.classList.remove('matched-recipe'); + }) + + artlist.classList.remove('list-searched') ; + }) +}) +</script> {{< artlist >}} +## Or Browse by Category... + +{{< tagcloud >}} + ## About this site Founded to provide a simple online cookbook without ads and obese web design. |