pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 12:31:22 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor park search results and search suggestions to utilize Alpine.js for improved state management. Enhanced event handling and user experience by replacing legacy JavaScript functions with Alpine.js reactive methods.

Browse Source
This commit is contained in:
pacnpal
2025-09-26 14:39:15 -04:00
parent 2328c919c9
commit e53414d795
2 changed files with 47 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
templates/partials/homepage/search_results.html
View File

@@ -173,22 +173,39 @@
{% endif %}
<!-- Search Suggestions -->
<div class="flex flex-wrap gap-2 justify-center">
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('searchSuggestions', () => ({
fillSearchInput(value) {
// Find the search input using AlpineJS approach
const searchInput = document.querySelector('input[type=text]');
if (searchInput) {
searchInput.value = value;
// Dispatch input event to trigger search
searchInput.dispatchEvent(new Event('input', { bubbles: true }));
searchInput.focus();
}
}
}));
});
</script>
<div x-data="searchSuggestions()" class="flex flex-wrap gap-2 justify-center">
<span class="text-xs text-muted-foreground">Try:</span>
<button class="text-xs text-primary hover:text-primary/80 transition-colors"
onclick="document.querySelector('input[type=text]').value='Disney'; document.querySelector('input[type=text]').dispatchEvent(new Event('input'));">
@click="fillSearchInput('Disney')">
Disney
</button>
<span class="text-xs text-muted-foreground">•</span>
<button class="text-xs text-primary hover:text-primary/80 transition-colors"
onclick="document.querySelector('input[type=text]').value='roller coaster'; document.querySelector('input[type=text]').dispatchEvent(new Event('input'));">
@click="fillSearchInput('roller coaster')">
Roller Coaster
</button>
<span class="text-xs text-muted-foreground">•</span>
<button class="text-xs text-primary hover:text-primary/80 transition-colors"
onclick="document.querySelector('input[type=text]').value='Cedar Point'; document.querySelector('input[type=text]').dispatchEvent(new Event('input'));">
@click="fillSearchInput('Cedar Point')">
Cedar Point
</button>
</div>
</div>
{% endif %}
{% endif %}