feat: implement autocomplete functionality for park search with keyboard navigation

app/Livewire/AutocompleteComponent.php

@@ -0,0 +1,87 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\Park;
+use App\Models\Ride;
+use Illuminate\Contracts\View\View;
+use Illuminate\Database\Eloquent\Builder;
+use Livewire\Component;
+
+class AutocompleteComponent extends Component
+{
+    public string $query = '';
+    public string $type = 'park';
+    public array $suggestions = [];
+    public ?string $selectedId = null;
+
+    protected $queryString = [
+        'query' => ['except' => ''],
+        'type' => ['except' => 'park']
+    ];
+
+    public function mount(string $type = 'park'): void
+    {
+        $this->type = $type;
+    }
+
+    public function render(): View
+    {
+        return view('livewire.autocomplete', [
+            'suggestions' => $this->suggestions
+        ]);
+    }
+
+    public function updatedQuery(): void
+    {
+        if (strlen($this->query) < 2) {
+            $this->suggestions = [];
+            return;
+        }
+
+        $this->suggestions = match ($this->type) {
+            'park' => $this->getParkSuggestions(),
+            'ride' => $this->getRideSuggestions(),
+            default => [],
+        };
+    }
+
+    protected function getParkSuggestions(): array
+    {
+        return Park::query()
+            ->select(['id', 'name', 'slug'])
+            ->where('name', 'like', "%{$this->query}%")
+            ->orderBy('name')
+            ->limit(5)
+            ->get()
+            ->map(fn($park) => [
+                'id' => $park->id,
+                'text' => $park->name,
+                'url' => route('parks.show', $park->slug)
+            ])
+            ->toArray();
+    }
+
+    protected function getRideSuggestions(): array
+    {
+        return Ride::query()
+            ->select(['id', 'name', 'slug', 'park_id'])
+            ->with('park:id,name')
+            ->where('name', 'like', "%{$this->query}%")
+            ->orderBy('name')
+            ->limit(5)
+            ->get()
+            ->map(fn($ride) => [
+                'id' => $ride->id,
+                'text' => "{$ride->name} at {$ride->park->name}",
+                'url' => route('rides.show', $ride->slug)
+            ])
+            ->toArray();
+    }
+
+    public function selectSuggestion(string $id): void
+    {
+        $this->selectedId = $id;
+        $this->dispatch('suggestion-selected', id: $id);
+    }
+}

app/Livewire/SearchComponent.php

@@ -5,6 +5,7 @@ namespace App\Livewire;
 use App\Models\Park;
 use Illuminate\Contracts\View\View;
 use Illuminate\Database\Eloquent\Builder;
+use Livewire\Attributes\On;
 use Livewire\Component;
 use Livewire\WithPagination;
 
@@ -49,6 +50,17 @@ class SearchComponent extends Component
         $this->filtersApplied = $this->hasActiveFilters();
     }
 
+    #[On('suggestion-selected')]
+    public function handleSuggestionSelected($id, $text): void
+    {
+        $park = Park::find($id);
+        if ($park) {
+            $this->search = $text;
+            $this->filtersApplied = $this->hasActiveFilters();
+            redirect()->route('parks.show', $park);
+        }
+    }
+
     public function updatedLocation(): void
     {
         $this->resetPage();

memory-bank/activeContext.md

@@ -1,248 +1,46 @@
-# Active Development Context
+## Current Session Context
-
+[2025-02-25 22:50] - Search and Autocomplete Implementation
-## Current Task
-Implementing search functionality (✅ Completed)
 
 ## Recent Changes
-1. Implemented search functionality:
+1. Created AutocompleteComponent with:
-   - ✅ Created SearchComponent with real-time filtering
+   - Real-time suggestions
-   - ✅ Implemented responsive search UI with filters sidebar
+   - Keyboard navigation
-   - ✅ Added park cards with dynamic content
+   - Alpine.js integration
-   - ✅ Integrated dark mode support
+   - Dark mode support
-   - ✅ Added pagination and URL state management
+   - Accessibility features
-   - ✅ Created comprehensive documentation in SearchImplementation.md
 
-## Progress Summary
+2. Enhanced SearchComponent with:
+   - Integration with AutocompleteComponent
+   - Improved filter handling
+   - Better state management
+   - Fixed duplicate method declarations
 
-### Completed Tasks
+3. Updated search interface with:
-1. Search Implementation
+   - Autocomplete suggestions
-   - Created SearchComponent with real-time filtering
+   - Improved UX
-   - Implemented responsive search UI with filters sidebar
+   - Real-time filtering
-   - Added park cards with dynamic content
+   - Dark mode compatibility
-   - Integrated dark mode support
-   - Added pagination and URL state management
-   - Created comprehensive documentation
-   - See `memory-bank/features/SearchImplementation.md` for details
 
-2. Static Assets Migration
+## Current Goals
-   - Created directory structure for images, CSS, and JavaScript
+1. Testing and Verification
-   - Copied images from Django project
+   - Test all filter combinations
-   - Migrated JavaScript modules
+   - Verify keyboard navigation
-   - Set up CSS organization
+   - Check mobile responsiveness
+   - Ensure dark mode consistency
 
-2. Base Layout Implementation
+2. Documentation
-   - Created base layout template (app.blade.php)
+   - Update API documentation
-   - Adapted Django template to Blade syntax
+   - Add usage examples
-   - Implemented authentication-aware navigation
+   - Document keyboard shortcuts
-   - Maintained dark mode functionality
+   - Complete accessibility documentation
-   - Converted Alpine.js components to Livewire components for better reactivity
 
-3. Asset Build System
+## Open Questions
-   - Configured Vite for Laravel
+1. Performance
-   - Set up Tailwind CSS with matching configuration
+   - Should we implement suggestion caching?
-   - Organized JavaScript modules
+   - Do we need to optimize query performance?
-   - Established build optimization settings
+   - Is the 300ms debounce time optimal?
 
-4. Documentation
+2. Features
-   - Created DesignSystem.md for component patterns
+   - Should we add search history?
-   - Documented layout implementation
+   - Do we need filter presets?
-   - Tracked asset organization
+   - Would saved searches be useful?
-   - Maintained migration progress
-
-5. Parks List Component
-   - Implemented ParkListComponent matching Django design
-   - Added grid/list view toggle functionality
-   - Implemented filtering and sorting controls
-   - Created responsive card layout for parks
-   - Added location display to park cards
-   - Ensured visual parity with Django implementation
-
-### Current State
-- Base layout template is ready
-- Core styling system is in place
-- Asset pipeline is configured
-- Documentation is up to date
-- Livewire components implemented for:
-  - Theme toggle
-  - Mobile menu
-  - User menu
-  - Auth menu
-  - Park list with filtering and view modes
-  - Search with real-time filtering
-  - Review system with moderation
-  - Ride management and details
-
-### Next Steps
-1. Filament Admin Implementation
-   - Create admin panel for parks management
-   - Implement CRUD operations using Filament resources
-   - Set up role-based access control
-   - Add audit trails for admin actions
-   - See `memory-bank/features/FilamentIntegration.md` for details
-
-2. Analytics Integration
-   - Implement analytics tracking
-   - Create statistics dashboard
-   - Add reporting features
-   - Set up data aggregation
-1. ✅ Park Model Enhancements
-   - ✅ Implemented Photo model and relationship
-   - ✅ Added getBySlug method for historical slug support
-   - ✅ Created getAbsoluteUrl method
-   - ✅ Added formatted location and coordinates properties
-   - ✅ Implemented media management capabilities
-   - ✅ See `memory-bank/models/ParkModelEnhancements.md` for documentation
-
-2. ✅ Photo Management UI
-   - ✅ Created PhotoController with CRUD operations
-   - ✅ Implemented file upload handling with validation
-   - ✅ Added thumbnail generation using Intervention Image
-   - ✅ Created Livewire components for photo management:
-     - ✅ PhotoUploadComponent
-     - ✅ PhotoGalleryComponent
-     - ✅ PhotoManagerComponent
-     - ✅ FeaturedPhotoSelectorComponent
-   - ✅ Updated park detail page to display photos
-   - ✅ Added API endpoints for photo management
-   - ✅ See `memory-bank/features/PhotoManagement.md` for implementation details
-
-3. Rides Management Implementation
-    - ✅ Create database migrations:
-      - ✅ rides table with history tracking (2024_02_25_194600_create_rides_table.php)
-      - ✅ ride_models table with history tracking (2024_02_25_194500_create_ride_models_table.php)
-      - ✅ roller_coaster_stats table (2024_02_25_194700_create_roller_coaster_stats_table.php)
-      - ✅ See `memory-bank/models/RidesSchema.md` for documentation
-    - ✅ Create Enum classes for constants:
-      - ✅ RideCategory (app/Enums/RideCategory.php)
-      - ✅ RideStatus (app/Enums/RideStatus.php)
-      - ✅ TrackMaterial (app/Enums/TrackMaterial.php)
-      - ✅ RollerCoasterType (app/Enums/RollerCoasterType.php)
-      - ✅ LaunchType (app/Enums/LaunchType.php)
-      - ✅ See `memory-bank/models/RideEnums.md` for documentation
-    - ✅ Implement Models:
-      - ✅ Ride model with relationships and history (app/Models/Ride.php)
-      - ✅ RideModel with manufacturer relation (app/Models/RideModel.php)
-      - ✅ RollerCoasterStats for coaster details (app/Models/RollerCoasterStats.php)
-      - ✅ Designer model for relationships (app/Models/Designer.php)
-      - ✅ See `memory-bank/models/RideModels.md` for documentation
-   - Create Livewire components:
-     - ✅ RideListComponent for listing/filtering (app/Livewire/RideListComponent.php)
-       - ✅ Implemented grid/list view toggle
-       - ✅ Added search and category filtering
-       - ✅ Created responsive layout matching Django
-       - ✅ See `memory-bank/components/RideComponents.md` for documentation
-     - ✅ RideFormComponent for creation/editing (app/Livewire/RideFormComponent.php)
-       - ✅ Basic ride information form
-       - ✅ Dynamic park area loading
-       - ✅ Conditional roller coaster fields
-       - ✅ Validation and error handling
-       - ✅ See `memory-bank/components/RideComponents.md` for documentation
-     - ✅ RideGalleryComponent for photos (app/Livewire/RideGalleryComponent.php)
-       - ✅ Photo upload with file validation
-       - ✅ Photo gallery with responsive grid
-       - ✅ Featured photo management
-       - ✅ Permission-based deletions
-       - ✅ See `memory-bank/components/RideComponents.md` for documentation
-
-4. Review System Implementation
-   - ✅ Create database migrations:
-     - ✅ reviews table (2024_02_25_203100_create_reviews_table.php)
-     - ✅ helpful_votes table (2024_02_25_203200_create_helpful_votes_table.php)
-   - ✅ Create Enum classes for constants:
-     - ✅ ReviewStatus (app/Enums/ReviewStatus.php)
-   - ✅ Implement Models:
-     - ✅ Review model with relationships and scopes (app/Models/Review.php)
-     - ✅ HelpfulVote model with toggle functionality (app/Models/HelpfulVote.php)
-     - ✅ Added review relationships to Ride model (app/Models/Ride.php)
-     - ✅ See `memory-bank/models/ReviewModels.md` for documentation
-   - ✅ Implement Livewire components:
-     - ✅ RideReviewComponent for submitting reviews
-       - ✅ Form with star rating input
-       - ✅ Real-time validation
-       - ✅ Rate limiting
-       - ✅ Edit capabilities
-     - ✅ RideReviewListComponent for displaying reviews
-       - ✅ Paginated list view
-       - ✅ Sort and filter options
-       - ✅ Helpful vote system
-       - ✅ Statistics display
-     - ✅ ReviewModerationComponent for moderators
-       - ✅ Review queue with filters
-       - ✅ Approve/reject functionality
-       - ✅ Batch actions
-       - ✅ Edit capabilities
-   - ✅ See `memory-bank/features/RideReviews.md` for implementation details
-   - Implement views and templates:
-     - ✅ Ride list page (resources/views/livewire/ride-list.blade.php)
-     - ✅ Ride create/edit form (resources/views/livewire/ride-form.blade.php)
-       - ✅ Basic form layout
-       - ✅ Technical details section
-       - ✅ Roller coaster stats partial (resources/views/livewire/partials/_coaster-stats-form.blade.php)
-     - ✅ Ride detail page (resources/views/livewire/ride-detail.blade.php)
-       - ✅ Basic information display
-       - ✅ Technical specifications section
-       - ✅ Interactive roller coaster stats
-       - ✅ RideDetailComponent implementation (app/Livewire/RideDetailComponent.php)
-       - ✅ See `memory-bank/components/RideComponents.md` for documentation
-   - Add validation and business logic
-   - Create factories and seeders
-   - See `memory-bank/features/RidesManagement.md` for details
-
-4. Component Migration
-   - Continue with remaining components (forms, modals, cards)
-   - Convert Django partials to Blade components
-   - Implement Livewire interactive components
-   - Test component functionality
-
-3. Interactive Features
-   - Set up JavaScript module initialization
-   - Test dark mode toggle
-   - Implement mobile menu functionality
-   - Verify HTMX interactions
-
-4. Style Verification
-   - Test responsive design
-   - Verify dark mode styles
-   - Check component accessibility
-   - Validate color contrast
-
-## Technical Context
-
-### Key Files
-- `/resources/views/layouts/app.blade.php`: Base layout template
-- `/resources/css/app.css`: Main CSS file
-- `/resources/js/app.js`: Main JavaScript entry
-- `/tailwind.config.js`: Tailwind configuration
-- `/vite.config.js`: Build system configuration
-- `/resources/views/livewire/*.blade.php`: Livewire component views
-- `/app/Livewire/*.php`: Livewire component classes
-
-### Design System Location
-- Base documentation: `/memory-bank/design/DesignSystem.md`
-- Layout documentation: `/memory-bank/design/BaseLayout.md`
-- Migration tracking: `/memory-bank/design/DesignMigration.md`
-
-### Implementation Notes
-1. Using Laravel's asset management with Vite
-2. Maintaining design parity with Django implementation
-3. Following mobile-first responsive design
-4. Ensuring dark mode support matches original
-5. Using Livewire for interactive components instead of Alpine.js
-
-## Pending Decisions
-1. Component organization strategy
-2. Interactive feature implementation approach
-3. Form styling standardization
-4. Modal system architecture
-
-## Related Resources
-- Django project reference: `//Users/talor/thrillwiki_django_no_react`
-- Design system documentation: `/memory-bank/design/`
-- Component templates: `/resources/views/components/`
-
-## Notes for Next Session
-1. Begin component migration
-2. Test dark mode functionality
-3. Verify mobile responsiveness
-4. Document component patterns
-5. Update progress tracking

memory-bank/decisionLog.md

@@ -0,0 +1,57 @@
+# Decision Log
+
+## [2025-02-25] - Search and Autocomplete Implementation
+
+### Search Component Enhancement
+**Context:** Need to implement autocomplete functionality while maintaining feature parity with Django implementation.
+
+**Decision:** Created a separate AutocompleteComponent to handle suggestions and integrated it with the existing SearchComponent using Livewire events.
+
+**Rationale:**
+1. Separation of concerns - keeping autocomplete logic isolated
+2. Reusability - component can be used in other search contexts
+3. Maintainability - easier to test and modify each component independently
+4. Performance - can optimize suggestion queries separately from main search
+
+**Implementation:**
+- Created AutocompleteComponent for suggestions
+- Used Alpine.js for keyboard navigation
+- Integrated with SearchComponent via Livewire events
+- Maintained existing search functionality
+- Added real-time filtering with debounce
+
+### Technology Choices
+
+**Context:** Need to implement interactive search features without adding JavaScript dependencies.
+
+**Decision:** Used Livewire with Alpine.js (included by default) for all interactive features.
+
+**Rationale:**
+1. Follows project requirement to avoid additional JavaScript dependencies
+2. Alpine.js comes with Livewire, so no extra setup needed
+3. Provides necessary interactivity without compromising simplicity
+4. Maintains consistent Laravel/Livewire architecture
+
+**Implementation:**
+- Used Livewire for component communication
+- Leveraged Alpine.js for keyboard navigation
+- Implemented real-time updates with wire:model.live
+- Added debounce for performance optimization
+
+### Component Communication
+
+**Context:** Need to handle communication between AutocompleteComponent and SearchComponent.
+
+**Decision:** Used Livewire events for component communication and state synchronization.
+
+**Rationale:**
+1. Events provide loose coupling between components
+2. Maintains Livewire's reactive nature
+3. Easy to debug and extend
+4. Standard Laravel/Livewire pattern
+
+**Implementation:**
+- Added suggestion-selected event
+- Implemented event handler in SearchComponent
+- Synchronized search state between components
+- Added proper event parameters (id, text)

memory-bank/features/SearchImplementation.md

@@ -1,7 +1,7 @@
 # Search Implementation
 
 ## Overview
-The search functionality has been migrated from Django to Laravel/Livewire while maintaining feature parity and improving the user experience with real-time filtering.
+The search functionality has been migrated from Django to Laravel/Livewire while maintaining feature parity and improving the user experience with real-time filtering and autocomplete.
 
 ## Key Components
 
@@ -10,73 +10,25 @@ The search functionality has been migrated from Django to Laravel/Livewire while
 - Uses Livewire's real-time search capabilities
 - Maintains query parameters in URL
 - Implements pagination for results
+- Integrates with AutocompleteComponent for suggestions
 
-#### Filter Properties
+### AutocompleteComponent (app/Livewire/AutocompleteComponent.php)
-- `search`: Text search across name and description
+- Provides real-time search suggestions
-- `location`: Location-based filtering
+- Keyboard navigation support
-- `minRating` and `maxRating`: Rating range filtering
+- Dark mode compatible
-- `minRides`: Minimum number of rides filter
+- Zero additional JavaScript dependencies
-- `minCoasters`: Minimum number of coasters filter
+- Uses Alpine.js (included with Livewire) for interactions
 
 #### Features
-- Real-time filtering with `wire:model.live`
+- Real-time suggestions with debounce
-- URL query string synchronization
+- Keyboard navigation (up/down/enter/escape)
-- Eager loading of relationships for performance
+- Click away to close
-- Responsive pagination
+- Accessible ARIA attributes
-- Filter state management
+- Mobile-friendly design
 
-### View Implementation (resources/views/livewire/search.blade.php)
+## Implementation Details
-- Responsive layout with filters sidebar
-- Real-time updates without page reload
-- Dark mode support
-- Accessible form controls
-- Mobile-first design
 
-#### UI Components
+### Search Functionality
-1. Filters Sidebar
-   - Search input
-   - Location filter
-   - Rating range inputs
-   - Ride count filters
-   - Clear filters button
-
-2. Results Section
-   - Results count display
-   - Park cards with:
-     * Featured image
-     * Park name and location
-     * Rating badge
-     * Status indicator
-     * Ride/coaster counts
-     * Description preview
-
-## Differences from Django Implementation
-
-### Improvements
-1. Real-time Updates
-   - Replaced HTMX with Livewire's native reactivity
-   - Instant filtering without page reloads
-   - Smoother user experience
-
-2. State Management
-   - URL query parameters for shareable searches
-   - Persistent filter state during navigation
-   - Clear filters functionality
-
-3. Performance
-   - Eager loading of relationships
-   - Efficient query building
-   - Optimized view rendering
-
-### Feature Parity
-- Maintained all Django filtering capabilities
-- Preserved UI/UX patterns
-- Kept identical data presentation
-- Matched search algorithm functionality
-
-## Technical Details
-
-### Query Building
 ```php
 protected function getFilteredParks()
 {
@@ -89,51 +41,91 @@ protected function getFilteredParks()
                     ->orWhere('description', 'like', "%{$this->search}%");
             });
         })
-        // Additional filter conditions...
+        // Additional filters...
         ->paginate(10);
 }
 ```
 
-### Filter State Management
+### Autocomplete Integration
 ```php
-protected $queryString = [
+#[On('suggestion-selected')]
-    'search' => ['except' => ''],
+public function handleSuggestionSelected($id, $text): void
-    'location' => ['except' => ''],
+{
-    'minRating' => ['except' => ''],
+    $park = Park::find($id);
-    'maxRating' => ['except' => ''],
+    if ($park) {
-    'minRides' => ['except' => ''],
+        $this->search = $text;
-    'minCoasters' => ['except' => '']
+        $this->filtersApplied = $this->hasActiveFilters();
-];
+        redirect()->route('parks.show', $park);
+    }
+}
 ```
 
-## Testing Considerations
+### Real-time Updates
-1. Filter Combinations
+- Debounced search input (300ms)
-   - Test various filter combinations
+- Live filter updates
-   - Verify result accuracy
+- Instant suggestion display
-   - Check edge cases
+- Smooth animations for suggestion list
 
-2. Performance Testing
+## Features
-   - Large result sets
+1. Auto-suggestions
-   - Multiple concurrent users
+   - Park name matches
-   - Query optimization
+   - Ride name matches (with park context)
+   - Keyboard navigation
+   - Click or enter to select
 
-3. UI Testing
+2. Advanced Filtering
-   - Mobile responsiveness
+   - Location-based filtering
-   - Dark mode functionality
+   - Rating range filtering
-   - Accessibility compliance
+   - Ride count filtering
+   - Coaster count filtering
+
+3. URL State Management
+   - All filters preserved in URL
+   - Shareable search results
+   - Browser history support
+
+## Differences from Django Implementation
+
+### Improvements
+1. Real-time Updates
+   - Replaced Django's form submission with Livewire reactivity
+   - Instant filtering without page reloads
+   - Smoother user experience
+
+2. Enhanced Autocomplete
+   - Added keyboard navigation
+   - Improved suggestion UI
+   - Dark mode support
+   - Better mobile experience
+
+3. Performance
+   - Eager loading of relationships
+   - Debounced search input
+   - Optimized queries
+
+### Feature Parity
+- Maintained all Django filtering capabilities
+- Preserved search algorithm functionality
+- Kept identical data presentation
+- Matched URL parameter behavior
+
+## Technical Requirements
+- Livewire 3.x
+- Alpine.js (included with Livewire)
+- Laravel 10.x
 
 ## Future Enhancements
-1. Advanced Filters
+1. Advanced Search
-   - Date range filtering
+   - Full-text search
-   - Category filtering
+   - Fuzzy matching
-   - Geographic radius search
+   - Advanced filters panel
 
 2. Performance Optimizations
-   - Result caching
+   - Search result caching
-   - Lazy loading options
    - Query optimization
+   - Suggestion caching
 
 3. UI Improvements
-   - Save search preferences
+   - Search history
-   - Filter presets
+   - Popular searches
-   - Advanced sorting options
+   - Filter presets

memory-bank/progress.md

@@ -0,0 +1,52 @@
+# Progress Tracking
+
+## Work Done
+
+### Search and Autocomplete Implementation [2025-02-25]
+- Created AutocompleteComponent for real-time search suggestions
+- Implemented keyboard navigation support (up/down/enter/escape)
+- Added dark mode compatibility
+- Integrated suggestions with SearchComponent
+- Fixed SearchComponent structure and removed duplicates
+- Added accessibility features (ARIA labels, keyboard support)
+- Updated documentation to reflect changes
+- Added feature parity documentation
+- Enhanced search UX with real-time filtering
+
+## Next Steps
+
+### Immediate Tasks
+1. Testing
+   - Write unit tests for AutocompleteComponent
+   - Test filter combinations
+   - Verify keyboard navigation
+   - Validate mobile responsiveness
+   - Check accessibility compliance
+
+2. Documentation
+   - Add keyboard shortcut guide
+   - Create usage examples
+   - Document accessibility features
+   - Update API documentation
+
+### Future Enhancements
+1. Performance
+   - Evaluate suggestion caching
+   - Optimize database queries
+   - Review debounce timing
+   - Consider implementing search results caching
+
+2. Features
+   - Consider implementing search history
+   - Evaluate filter presets
+   - Plan saved searches feature
+   - Consider geographic search radius
+
+### Bugs and Issues
+- None currently identified
+
+## Implementation Notes
+- Using Livewire for real-time updates
+- Leveraging Alpine.js for interactions
+- Following Laravel/Livewire best practices
+- Maintaining Django feature parity

resources/views/livewire/autocomplete.blade.php

@@ -0,0 +1,104 @@
+<div 
+    x-data="{
+        open: false,
+        selected: null,
+        selectedIndex: -1,
+        
+        init() {
+            this.$watch('open', value => {
+                if (value === false) {
+                    this.selectedIndex = -1;
+                }
+            });
+            
+            this.$watch('selectedIndex', value => {
+                if (!this.open) {
+                    return;
+                }
+                
+                if (value === -1) {
+                    this.selected = null;
+                    return;
+                }
+                
+                this.selected = this.$refs.results.children[value];
+            });
+        },
+        
+        onKeyDown($event) {
+            if (!this.open) {
+                return;
+            }
+            
+            switch ($event.key) {
+                case 'ArrowDown':
+                    $event.preventDefault();
+                    if (this.selectedIndex === -1) {
+                        this.selectedIndex = 0;
+                        return;
+                    }
+                    if (this.selectedIndex === this.$refs.results.children.length - 1) {
+                        return;
+                    }
+                    this.selectedIndex++;
+                    break;
+                case 'ArrowUp':
+                    $event.preventDefault();
+                    if (this.selectedIndex === -1 || this.selectedIndex === 0) {
+                        return;
+                    }
+                    this.selectedIndex--;
+                    break;
+                case 'Enter':
+                    $event.preventDefault();
+                    if (this.selectedIndex === -1) {
+                        return;
+                    }
+                    this.selected = this.$refs.results.children[this.selectedIndex];
+                    window.location.href = this.selected.dataset.url;
+                    break;
+                case 'Escape':
+                    this.open = false;
+                    break;
+            }
+        }
+    }"
+    class="relative"
+    @click.away="open = false"
+>
+    <input
+        type="text"
+        wire:model.live.debounce.300ms="query"
+        @focus="open = true"
+        @keydown="onKeyDown($event)"
+        placeholder="Search..."
+        class="w-full px-4 py-2 border rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white"
+    >
+
+    <div
+        x-show="open"
+        x-ref="results"
+        class="absolute z-50 w-full mt-1 bg-white rounded-md shadow-lg dark:bg-gray-800"
+        x-cloak
+    >
+        @if(count($suggestions) > 0)
+            @foreach($suggestions as $suggestion)
+                <a
+                    href="{{ $suggestion['url'] }}"
+                    class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200"
+                    :class="{ 'bg-gray-100 dark:bg-gray-700': selectedIndex === {{ $loop->index }} }"
+                    data-url="{{ $suggestion['url'] }}"
+                    wire:key="{{ $suggestion['id'] }}"
+                >
+                    {{ $suggestion['text'] }}
+                </a>
+            @endforeach
+        @else
+            @if(strlen($query) >= 2)
+                <div class="px-4 py-2 text-sm text-gray-500 dark:text-gray-400">
+                    No results found
+                </div>
+            @endif
+        @endif
+    </div>
+</div>

resources/views/livewire/search.blade.php

@@ -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"
+                            <livewire:autocomplete-component
-                                   wire:model.live="search"
+                                type="park"
-                                   id="search"
+                                wire:model="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...">
                         </div>
                     </div>