Filament•3w ago

Possible to use searchable select in custom Alpine component?

New to filament and Alpine, but i'm trying to create a custom form "Alpine only" no livewire form. I'd like to use the select component from filament with the searchable functionality. Is this possible?

     
<x-filament-forms::field-wrapper label="Address 1">
        <x-filament::input.wrapper>
          <x-filament::input.select
            x-model="address_1"
            @change="handleAddress1Change($event.target.value)">
            <option value="">Select an address</option>
            <template x-for="(item, index) in address1Options" :key="index">
              <option :value="item" x-text="item"></option>
            </template>
          </x-filament::input.select>
        </x-filament::input.wrapper>
      </x-filament-forms::field-wrapper>

     
<x-filament-forms::field-wrapper label="Address 1">
        <x-filament::input.wrapper>
          <x-filament::input.select
            x-model="address_1"
            @change="handleAddress1Change($event.target.value)">
            <option value="">Select an address</option>
            <template x-for="(item, index) in address1Options" :key="index">
              <option :value="item" x-text="item"></option>
            </template>
          </x-filament::input.select>
        </x-filament::input.wrapper>
      </x-filament-forms::field-wrapper>

This gives me the standard select with single options, but it doesn't invoke the searchable ui. Any ideas how to do this?

1 Reply

toeknee•2w ago

Looking t the select blade from filament we merge the extrainputAttributes for multiple. If it is then we apply classes. I suspect we have a condition to check for multiple to then enable the chociesjs for searchable

Gaming

Programming

Possible to use searchable select in custom Alpine component?