Select2 multiple - Livewire/Alpine

select2.blade.php

<div
    x-data="{
        model: @entangle($attributes->wire('model')),
    }"
    x-init="
        select2 = $($refs.select)
            .not('.select2-hidden-accessible')
            .select2({
                theme: 'bootstrap',
                dropdownAutoWidth: true,
                width: '100%',
                minimumResultsForSearch: 10,
            });

        select2.on('select2:select', (event) => {
            model = Array.from(event.target.options).filter(option => option.selected).map(option => option.value);
        });

        select2.on('select2:unselect', (event) => {
            model = Array.from(event.target.options).filter(option => option.selected).map(option => option.value);
        });

        $watch('model', (value) => {
            select2.val(value).trigger('change');
        });
    "
    wire:ignore
>
    <select x-ref="select" {{ $attributes->merge(['class' => 'form-control']) }}>
        {{ $slot }}
    </select>
</div>

usage.blade.php

<label for="filter-student-status">{{ __('Invoice status') }}</label>
<x-select2 id="filter-student-status" wire:model.defer="filters.invoice-status" multiple>
    @foreach($this->invoiceStatuses as $status)
        <option value="{{ $status->id }}">{{ $status->name }}</option>
    @endforeach
</x-select2>

You can simply change select2:select event to following to make it work for both single & multiple

if (event.target.hasAttribute('multiple')) { model = Array.from(event.target.options).filter(option => option.selected).map(option => option.value); } else { model = event.params.data.id }

Love this! Works really well, except for when you have more than one on the page. What happens then is that selecting an option in one field also selects an option with the same id in other fields. I'm struggling to work out how to fix that. Could anyone point me in the right direction? Thanks!

when i try to edit the default edited option not selected! why?

Thank you so much!

Working example with choice js: https://github.com/Choices-js/Choices

<div
    x-data="{
        model: @entangle($attributes->wire('model')),
    }"
    x-init="
        select2 = new Choices($refs.select, {
                position: 'bottom',
                searchPlaceholderValue: '{{__('Search...')}}',
                shouldSort: false,
                itemSelectText: '',
            })
        $refs.select.addEventListener('change', (event)=>{
            if (event.target.hasAttribute('multiple')){
                model = Array.from(event.target.options).filter(option => option.selected).map(option => option.value);
            }else{
                model = event.target.value;
            }
        });
    "
    wire:ignore
>
    <select x-ref="select" {{ $attributes->merge(['class' => '']) }}>
        {{ $slot }}
    </select>
</div>

@harish81 Thank You, I've test Your code, and it's working good with choices.
One thing which is broken is because of using wire:ignore it can't dynamically refresh changed data (options are dependent on other select).
I'm struggling with this with no success

i am getting this error any idea?

Hello it is working with multiple option but not single choice. It is not filtering