Files
thrillwiki_laravel/resources/views/livewire/autocomplete.blade.php
pacnpal cc33781245 feat: Implement rides management with CRUD functionality
- Added rides index view with search and filter options.
- Created rides show view to display ride details.
- Implemented API routes for rides.
- Developed authentication routes for user registration, login, and email verification.
- Created tests for authentication, email verification, password reset, and user profile management.
- Added feature tests for rides and operators, including creation, updating, deletion, and searching.
- Implemented soft deletes and caching for rides and operators.
- Enhanced manufacturer and operator model tests for various functionalities.
2025-06-19 22:34:10 -04:00

104 lines
3.2 KiB
PHP

<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"
>
<div
x-show="open"
x-ref="results"
class="absolute z-50 w-full mt-1 bg-white rounded-md shadow-lg"
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"
:class="{ 'bg-gray-100': 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">
No results found
</div>
@endif
@endif
</div>
</div>