Viewing:
{{define "body"}}
<form
method="get"
action="/"
id='recipes-search-form'
>
<input type="search" id="search"
name="s" placeholder="search"
value="{{.SearchValue}}">
<details>
<summary>Search options</summary>
<div>Search in:</div>
<input id="t-title" name="t" type="checkbox" value="1" {{if .SearchTypeTitle}}checked{{end}}>
<label for="t-title">Title</label>
<input id="t-ing" name="t" type="checkbox" value="2" {{if .SearchTypeIng}}checked{{end}}>
<label for="t-ing">Ingredients</label>
<input id="t-ins" name="t" type="checkbox" value="4" {{if .SearchTypeIns}}checked{{end}}>
<label for="t-ins">Instructions</label>
<input id="t-by" name="t" type="checkbox" value="8" {{if .SearchTypeBy}}checked{{end}}>
<label for="t-by">By</label>
<input id="t-src" name="t" type="checkbox" value="16" {{if .SearchTypeSrc}}checked{{end}}>
<label for="t-src">Source</label>
</details>
<noscript>
<input type="submit" id="search"
name="submit" placeholder="search"
value="Do search">
</noscript>
</form>
<ul id="recipes-mount">
{{range .Items}}<li>{{ .Title }}<a href="/recipes/{{.Id}}">More</a></li>{{else}}<div><strong>no rows</strong></div>{{end}}
</ul>
<script>
const searchForm = document.getElementById('recipes-search-form')
const recipesMount = document.getElementById('recipes-mount')
function doSearch() {
const fd = new FormData(searchForm)
const fdString = new URLSearchParams(fd).toString()
let fetchStr = '/recipes_search'
if (fdString !== '') {
fetchStr = fetchStr + '?' + fdString
}
fetch(fetchStr).catch((a) => {
console.log('unable to fetch form', a)
}).then((res) => {
res.text().then(newsearch => { recipesMount.innerHTML = newsearch })
})
}
searchForm.addEventListener('change', function(e) {
if (e.target.name !== 't') {
return
}
doSearch()
})
function debounce(f, after) {
var timer = null;
return function(e) {
clearTimeout(timer)
timer = setTimeout(function() {
f(e)
}, after)
}
}
searchForm.addEventListener('keyup', debounce(function(e) {
if (e.target.name !== 's') {
return
}
doSearch()
}, 300))
searchForm.addEventListener('submit', function(e) {
e.preventDefault()
return false
})
</script>
{{end}}