Select2 is a package that helps you to use Select2 plugin in a simple way for livewire components.
Install the latest version using Composer.
1composer require pharaonic/livewire-select2
Optional : Publish the JavaScript file
1php artisan vendor:publish --tag=livewire-select2
This is how you can include it in your blade.
You have to include it after Livewire,
jQuery and Select2 Scripts,
there is 2 ways you can use on of them.
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 ... 5 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css"> 6 @livewireStyles 7 </head> 8 <body> 9 ...10 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>12 @livewireScripts13 14 <!-- Way 1 -->15 <x:pharaonic-select2::scripts />16 17 <!-- Way 2 : Vendor Publishing REQURIED -->18 <script src="{{ asset('vendor/pharaonic/pharaonic.select2.min.js') }}"></script>19 </body>20</html>
A basic usage of Select2 in your component.
ONLY : wire:model, wire:model.defer accepted.
1<div wire:ignore>2 <select data-pharaonic="select2" data-component-id="{{ $this->id }}" wire:model="country">3 <option value="EG">Egypt</option>4 <option value="TW">Taiwan</option>5 ...6 </select>7</div>
List of attributes that you can use to control Select2.
Attribute | Description |
---|---|
multiple |
Allows multiple selection. |
data-clear |
Activate AllowClear feature. |
data-tags |
Allows tags selection. |
data-search-off |
Hide search box. |
data-placeholder="Select..." |
Placeholder text. |
data-language="ar" |
Setting a language if you are using Select2 i18n files. |
data-dir="rtl" |
Setting full-element direction. |
data-parent="#id_here" |
If you have dropdown problem with Bootstrap Modal, you can set the Modal id and it gonna be fixed. |
You can use the events to load Select2 all over the page or on a specific input.
1// Init Event2$this->dispatchBrowserEvent('pharaonic.select2.init');3 4// Load Event5$this->dispatchBrowserEvent('pharaonic.select2.load', [6 'component' => $this->id,7 'target' => '#input-here'8]);