random-mirrors/based.cooking
1
0
Fork 0
mirror of https://github.com/LukeSmithxyz/based.cooking.git synced 2025-12-19 09:02:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Filter Articles with a Javascript Search (#772)

Browse Source 
* 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>
This commit is contained in:
Luke Smith
2022-05-26 23:58:53 +00:00
committed by GitHub
parent 0a837fb26a
commit b7f117cf4c
4 changed files with 101 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
content/_index.md
View File

@@ -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>
## All Recipes
<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++;
}
})
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.