Autocomplete

Text input with a suggestion dropdown and inline ghost text. The suggestion list comes from a Livewire method via wire-options, called once on first focus and cached client-side. If a value is already bound on load, the method is called immediately to resolve it.

Keyboard:

• ↑ ↓ to navigate,
• Tab, Enter or , to confirm,
• Escape to close.

Basic usage

Declare a method returning a list<string> and pass its name to wire-options. Use icon to add an icon, and floating for a floating label layout.

#[Renderless]
public function getCities(): array
{
    return ['Paris', 'London', 'Berlin'];
}

{{-- Standard --}}
<x-wirestrap::autocomplete
    wire:model="city"
    wire-options="getCities"
    label="City"
    icon="bi-geo-alt"
/>

{{-- Floating label --}}
<x-wirestrap::autocomplete ... floating />

Multiple

Add multiple to enable tag mode. wire:model must bind to an array property. Tags are synced via $wire.$set() rather than through the input directly, so wire:model.live has no effect here. Use the live prop instead to trigger a Livewire request on each tag change.

Keyboard: Enter, Tab, or , to add a tag. Backspace on an empty input removes the last tag.

public array $tags = [];

<x-wirestrap::autocomplete
    ...
    wire:model="tags"
    wire-options="getTags"
    multiple
/>

Add live to sync each tag change to Livewire immediately. Without it, tags are deferred until the next Livewire request.

<x-wirestrap::autocomplete ... live />

Reactive list

Use wire-options-watch to invalidate the cache when a Livewire property changes. The list reloads on the next focus, or immediately if the dropdown is already open. To force a reload imperatively, use $wirestrap.autocomplete.refresh(id).

<x-wirestrap::select
    ...
    wire:model="category"
    wire-options="getCategories"
/>

<x-wirestrap::autocomplete
    ...
    wire:model="item"
    wire-options="getItems"
    wire-options-watch="category"
/>

Disabled

<x-wirestrap::autocomplete ... disabled />

Validation

The component checks $errors for the wire:model key and applies the invalid state if found. Try submitting without typing a city.

{{-- Suppress both the invalid class and the error message --}}
<x-wirestrap::autocomplete ... :has-validation="false" />

{{-- Keep the invalid class, hide the error message --}}
<x-wirestrap::autocomplete ... :has-validation-message="false" />

In multiple mode, individual invalid tags are highlighted. Enter any value that is not a valid email address to trigger a per-tag error.

Props

x-wirestrap::autocomplete

$wirestrap.autocomplete