Files
pokemon/src/components/Search.astro

34 lines
1.4 KiB
Plaintext
Raw Normal View History

---
import { SignedIn } from "@clerk/astro/components";
---
<script is:inline>
const afterUpdate = (e) => {
const start = document.querySelector('#start');
if (start) {
const val = Number(start.value) || 0;
start.value = (val + 20).toString();
}
// delete the triggering element
if (e && e.detail && e.detail.elt) {
e.detail.elt.remove();
}
};
const beforeSearch = (e) => {
const start = document.querySelector('#start');
if (start) {
start.value = '0';
document.querySelector('#cardGrid').innerHTML = '';
window.scrollTo({ top: 0, behavior: 'instant' });
}
};
</script>
<SignedIn>
<form class="d-flex ms-2" role="search" id="searchform" hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit" hx-vals='{"start":"0"}' hx-on--after-request="afterUpdate()" hx-on--before-request="beforeSearch()">
<input type="hidden" name="start" id="start" value="0" />
<input type="search" name="q" class="form-control form-control-lg me-2" placeholder="Search cards..." />
<input type="submit" class="btn btn-outline-light" value="Search" onclick="const q = document.querySelector('[name=q]').value; dataLayer.push({ event: 'view_search_results', search_term: q });"/>
</form>
</SignedIn>