Simple way to handle the Select2 for livewire components.

Moamen Eltouny (Raggi)
PHP Version : >= 7.2 Livewire Version : >= 2.0 License Support
Source Packagist Version Packagist Downloads

Laravel Livewire jQuery Select2


Install the latest version using Composer

composer require pharaonic/livewire-select2
php artisan migrate

OptionalPublish the JavaScript file.

php artisan vendor:publish --tag=livewire-select2

This is how you can include it in your blade.

You have to include it after Livewire Scripts, there is 2 ways you can use on of them.

<!-- Way 1 -->
<x:pharaonic-select2::scripts />

<!-- Way 2 : Vendor Publishing REQURIED -->
<script src="{{ asset('vendor/pharaonic/pharaonic.select2.min.js') }}"></script>

A basic usage of Select2 in your component.

ONLY wire:model, wire:model.defer accepted.

<select data-pharaonic="select2" data-component-id="{{ $this->id }}" wire:model="country">
    <option value="EG">Egypt</option>
    <option value="TW">Taiwan</option>
multiple Allows multiple 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.