feat: implement autocomplete functionality for park search with keyboard navigation

This commit is contained in:
pacnpal
2025-02-26 13:00:42 -05:00
parent 82d99a8161
commit 1a88c35fa8
8 changed files with 443 additions and 342 deletions

View File

@@ -5,17 +5,16 @@
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
<h2 class="text-xl font-bold mb-4 dark:text-white">Filter Parks</h2>
<div class="space-y-4">
<!-- Search -->
<!-- Search with Autocomplete -->
<div class="flex flex-col">
<label for="search" class="text-sm font-medium text-gray-700 dark:text-gray-300">
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">
Search
</label>
<div class="mt-1">
<input type="text"
wire:model.live="search"
id="search"
class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Search parks...">
<livewire:autocomplete-component
type="park"
wire:model="search"
/>
</div>
</div>