Search Select OR Add

[silicahd]

For the select options I think having something like AppSheet would be amazing. In appsheet you can search or add a new value. I think this can be done with livewire and alpine.

https://livewire-wireui.com/docs/select

[REJack]

That would be amazing, then I can kick a custom select from me 🤣

[PH7-Jack]

@silicahd @REJack @ettiennelouw It's easy to do, we have slots in the select component: afterOptions, beforeOptions

<x-code-preview
    title="Async Search"
    href="#async-search"
    id="async-search"
    language="html"
    :code="$asyncSearch">
    <x-select
        class="sm:max-w-xs"
        label="Search a User"
        wire:model.defer="asyncSearchUser"
        placeholder="Select some user"
        :async-data="route('api.users.index')"
        option-label="name"
        option-value="id"
        hide-empty-message
    >
        <x-slot name="afterOptions" class="p-2 flex justify-center" x-show="displayOptions.length === 0">
            <x-button primary flat full>
                <span x-html="`Create user <b>${search}</b>`"></span>
            </x-button>
        </x-slot>
    </x-select>
</x-code-preview>

[PH7-Jack]

I've added a new example in the wireui docs https://livewire-wireui.com/docs/select#after-options-slot

[f4xy]

When a new tag is added, how can I refresh and exit after options slot and automatically select the tag that has been created?

[PH7-Jack]

@f4xy Could you create a new issue and describe the feature/bug?

[behvandi11]

When a new tag is added, how can I refresh and exit after options slot and automatically select the tag that has been created?

Hello buddy. Maybe a lot of time has passed since your question. I just came across your problem. I will leave the answer that worked for me here, maybe it will be useful for someone:

[Bmohsen]

When a new tag is added, how can I refresh and exit after options slot and automatically select the tag that has been created?

Hello buddy. Maybe a lot of time has passed since your question. I just came across your problem. I will leave the answer that worked for me here, maybe it will be useful for someone:

  <x-button
      x-on:click="close; options.push({ label: search, value: search }); select({ label: search, value: search }); "
      primary
      flat
      full>
      <span x-html="`Create user <b>${search}</b>`"></span>
  </x-button>

thank you sir, you just saved my life <3

[arthurshlain]

Hi there.

I make the same thing, but with multiselect and $wire.addCategory method:

<x-select class="sm:max-w-xs"
          wire:model="icons.{{ $index }}.category"
          placeholder="Category"
          multiselect
          :async-data="route('api.category.index')"
          option-label="name"
          option-value="id"
          hide-empty-message>
    <x-slot name="afterOptions" 
                  class="p-2 flex justify-center" 
                  x-show="search && !displayOptions.some(option => option.name.trim() === search.trim())">
        <x-button x-on:click="$wire.addCategory(search).then(function(response){ options.push({ label: response.name, value: response.id }); select({ label: response.name, value: response.id }); });"
                  primary flat full>
            <span x-html="`Create category <b>${search}</b>`"></span>
        </x-button>
    </x-slot>
</x-select>

But after adding new category the options list was broken — I can remove all options in select by clicking [×], but it's still active in dropdown:

"laravel/framework": "^10.10", // 10.24.0
"livewire/livewire": "^3.0", // 3.0.5
"wireui/wireui": "^1.18" // 1.18.1