Dynamic Combobox/Search

[mschuyler]

When using the combobox select - the input is searching from pre-loaded options.

I would like to use the input to enter a search term and go back to the server for updated options. Take the following case -

<?php

use Livewire\Volt\Component;

new class extends Component
{
    public array $options = [
        ['id' => 1, 'name' => 'one'],
        ['id' => 2, 'name' => 'two'],
        ['id' => 3, 'name' => 'three'],
    ];

    public $selectedOption = null;

    public array $search = [];

    public string $name = '';

    public function updated($property, $value): void
    {
        $this->search = collect($this->options)->where($property, $value)->toArray();
    }
}; ?>

<div>
    <flux:select :filter="false" wire:model.live="name" variant="combobox">
        @foreach ($search as $option)
            <flux:option
                wire:key="{{ $option['id'] }}"
                value="{{ $option['id'] }}"
            >
                {{ $option['name'] }}
            </flux:option>
        @endforeach
    </flux:select>
</div>

The wire:model.live="name" is for the selected option on the select rather than the modeled to the user input. I realize that a lot of use cases this works well but there are also significant use cases where we want to fetch different results/options based on that user input.

As Caleb has stated Flux is composable - would be great to compose a different select in to achieve this.