Autocomplete / select with large collections

[ArthurDoorgeest]

I'd like to either use the autocomplete of select component to have my users pick a product. The total product list consists of about 30k products. When using the component like below:

<flux:select variant="listbox" searchable placeholder="Choose product..." wire:model="product_id">
    <x-slot name="search">
        <flux:select.search placeholder="Search..." />
    </x-slot>
     @foreach($this->products as $product)
        <flux:option value="{{$product->id}}">{{$product->title}}</flux:option>
    @endforeach
</flux:select 

Issue:
With a the full collection of 30k products the page wil either load incredibly slow or will timeout. When manually decreasing the collection size to 25 items for example, the search method wil only filter within those 25 records.

Is there a way to do the a api request with the search string and display the options the is returned by that api request or is there a way to influence the filter method to do a custom query like:

return Model::query()->when($search, fn (Builder $query) => $query->where('field', 'LIKE', "%{$search}%"))->limit(25)->get()

[studiowizjo]

I would like to join the question:

I did it this way:

<flux:select 
    wire:model="teamFirst"
    variant="listbox" 
    searchable 
    :filter="false"
    placeholder="Select a team"
>
    <x-slot name="search">
        <flux:select.search wire:ignore wire:model.live.debounce.500ms="teamFirstSearch" placeholder="Search for a team" />
    </x-slot>

    @forelse ($teamFirstOptions as $teamId => $teamName)
        <flux:option wire:key="team-{{ $teamId }}" value="{{ $teamId }}">
            {{ $teamName }}
        </flux:option>
    @empty
        <flux:option wire:key="team-empty" value="">
            Enter a name to search
        </flux:option>
    @endforelse 
</flux:select>

And in the component itself:

#[Url] 
public ?string $teamFirstSearch = null;

public ?Collection $teamFirstOptions = null;

public function updatedTeamFirstSearch($value) {
    dd($value);
}

The problem is that my dump renders twice- once with the value I entered, and a moment later with empty string.

I also tried an approach with Alpine:

<div 
    x-data="{
        searchPhrase: $wire.entangle('teamFirstSearch'),
    }"
    class="form-item input-search-lg"
>
    <flux:select 
        wire:model="teamFirst"
        variant="listbox" 
        searchable 
        :filter="false"
        placeholder="Select a team"
    >
        <x-slot name="search">
            <flux:select.search x-model.debounce.500ms="searchPhrase" placeholder="Search for a team" />
        </x-slot>

        @forelse ($this->teamFirstOptions as $teamId => $teamName)
            <flux:option wire:key="team-{{ $teamId }}" value="{{ $teamId }}">
                {{ $teamName }}
            </flux:option>
        @empty
            <flux:option wire:key="team-empty" value="">
                Enter a name to search
            </flux:option>
        @endforelse 
    </flux:select>
</div>

And my component:

public function updatedTeamFirstSearch($value) {
    dd($value);
}

#[Computed]
public function teamFirstOptions() {
    return Team::query()
        ->where('name', 'like', '%'.$this->teamFirstSearch.'%')
        ->limit(20)
        ->pluck('name', 'id');
}

And the effect is:

1. I can see in the URL that the variable is updating.
2. The updatedTeamFirstSearch hook is not triggered. Apparently, setting the variable this way doesn't trigger the hooks.
3. The content of teamFirstOptions is also not changing.
4. If I click outside the select (focus out), the teamFirstSearch gets cleared but updates correctly on the backend.

[colinmac17]

I was able to get it working like this:

<?php

namespace App\Livewire\App\Colleges;

use App\Models\Sport;
use App\Models\SportConference;
use Livewire\Attributes\Modelable;
use Livewire\Attributes\Reactive;
use Livewire\Component;

class ConferenceDropdown extends Component
{
    #[Reactive]
    public Sport $sport;

    #[Modelable]
    public ?array $values = null;

    public string $conference = '';

    public ?array $conferenceOptions = null;

    public function placeholder()
    {
        return <<<'HTML'
        <div class="flex space-x-2">
            <flux:subheading>Loading conferences...</flux:subheading>
            <flux:icon.loading />
        </div>
        HTML;
    }

    public function updatedConference()
    {
        if(empty($this->conference)) {
            $this->conferenceOptions = null;
        } else {
            $sportConferences = SportConference::query()
                ->where('sport_id', $this->sport->id)
                ->where('name', 'ilike', "%{$this->conference}%")
                ->orderBy('name')->get();

            $this->conferenceOptions = $sportConferences->pluck('name', 'id')->toArray();
        }

    }
    

    public function render()
    {
        return view('livewire.app.colleges.conference-dropdown');
    }
}

<div>
    <flux:select
        wire:model="values"
        variant="listbox"
        multiple
        indicator="checkbox"
        placeholder="search for a conference"
        searchable
        clearable
        :filter="false"
    >
        <x-slot name="search">
            <flux:select.search wire:model.live.debounce.500ms="conference" placeholder="Search for a conference" />
        </x-slot>
        @isset($conferenceOptions)
            @foreach ($conferenceOptions as $id => $conference)
                <flux:option wire:key="{{$id}}" value="{{ $conference }}">
                    {{ $conference }}
                </flux:option>
            @endforeach
        @endisset
    </flux:select>
</div>