<script is:inline data-astro-rerun>
document.addEventListener('astro:page-load', () => {
const searchInput = document.querySelector('input[type="search"]');
const serviceSections = document.querySelectorAll('.service__block');
let searchTerm = '';
searchInput.addEventListener('input', (event) => {
searchTerm = event.target.value.toLowerCase();
serviceSections.forEach((section) => {
const serviceCards = section.querySelectorAll('.service');
let hasVisibleCards = false;
serviceCards.forEach((card) => {
const title = card.querySelector('h3')?.textContent.toLowerCase() || '';
if (title.includes(searchTerm)) {
card.style.display = 'block';
hasVisibleCards = true;
} else {
card.style.display = 'none';
}
});
if (hasVisibleCards) {
section.style.display = 'grid';
} else {
section.style.display = 'none';
}
});
});
const categoryButtons = document.querySelectorAll('.tag');
categoryButtons.forEach((button) => {
button.addEventListener('click', (event) => {
searchTerm = '';
searchInput.value = '';
const selectedCategory = event.target.dataset.category;
serviceSections.forEach((section) => {
section.style.display = 'none'; });
if (selectedCategory === 'All') { serviceSections.forEach((section) => {
section.style.display = 'grid'; }); } else { const selectedSections = document.querySelectorAll(
[data-category="${selectedCategory}"]
); selectedSections.forEach((section) => {
section.style.display = 'grid';
}); } }); }); });
</script>
#when click on tag button must show all cards from selected category and clear input search field
somber sable
bright ridgeBOT
Hi @somber sable. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Your script looks good for implementing category filtering and search functionality in Astro. The data-astro-rerun attribute is correctly used to ensure your script re-executes after every page transition when using Astro's view transitions.
Let me explain the key parts of your implementation:
-
The script uses
astro:page-loadevent listener, which is the correct approach for ensuring your code runs both on initial page load and after every navigation with view transitions. As the View Transitions documentation explains, this event fires after the new page is visible to the user. -
You're using
is:inlinewithdata-astro-rerunwhich was added in Astro 4.5.0. This combination ensures your script will re-execute after every transition, as mentioned in the Script behavior documentation. -
Your implementation correctly handles:
- Filtering cards based on search input
- Clearing the search input when a category button is clicked
- Showing all cards when "All" category is selected
- Showing only cards from the selected category otherwise
This approach aligns with Astro's recommended patterns for client-side scripts and event handling as described in the Scripts and event handling guide.
If you're using this with view transitions, remember that the script will run after each page navigation, which is exactly what you want for maintaining interactive functionality across page transitions.