Skip to content

Instantly share code, notes, and snippets.

@amiranagram
Created June 29, 2021 13:51
Show Gist options
  • Save amiranagram/896d17e92c2c42e4ea9f59043f696bc6 to your computer and use it in GitHub Desktop.
Save amiranagram/896d17e92c2c42e4ea9f59043f696bc6 to your computer and use it in GitHub Desktop.
Select2 multiple - Livewire/Alpine
<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>
<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>
@mepsd
Copy link

mepsd commented Mar 23, 2023

image
i am getting this error any idea?

@muratunal76
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment