Download the PHP package lara-pack/livewire-select2 without Composer
On this page you can find all versions of the php package lara-pack/livewire-select2. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download lara-pack/livewire-select2
More information about lara-pack/livewire-select2
Files in lara-pack/livewire-select2
Package livewire-select2
Short Description Livewire Component : Select2
License MIT
Informations about the package livewire-select2
Livewire Select2 Component
A custom Livewire V3/V4 component wrapper for Select2. This component simplifies the usage of Select2 in your Livewire projects, supporting both static options arrays and AJAX-based remote data loading, along with multiple selections capabilities.
Requirements
- PHP 8.1+
- Laravel 10+ / 11+
- Livewire ^3.0|^4.0
- jQuery
- Select2 (JS & CSS)
Installation
You can install the package via composer:
Note: Ensure you have already included jQuery and Select2 assets in your layout file/app.
Usage
You can use the component in your Livewire blade views using the <livewire:... /> tag.
1. Basic Usage (Static Options)
Provide an array of arrays containing id and text keys.
2. AJAX Remote Data (Load from API / URL)
Instead of passing static options, you can provide an endpoint URL. The component will handle the AJAX calls and debounce internally.
The API should return an array of objects structured as [{ "id": 1, "text": "Option 1" }, ...].
3. Multiple Selections
Enable multiple selection mode by passing :multiple="true".
4. Custom "Select All Filtered" for Multiple AJAX
This component comes with a special feature for AJAX Multiple Select. If you pass :multipleSelection="true", an extra option "--- Pilih Semua Yang Tampil ---" will appear at the top. Selecting it will fetch and select all data matching the search term.
Available Properties
| Property | Type | Default | Description |
|---|---|---|---|
wire:model |
string |
null |
Bind the selected value. Must be { "id": ..., "text": ... } for single select, or an array of objects for multiple. |
options |
array |
[] |
Static array of options: [['id'=>1, 'text'=>'Opt']]. |
url |
string |
"" |
The API Endpoint for AJAX data loading. |
minimumInputLength |
int |
0 |
Number of characters required to trigger the search. |
placeholder |
string |
"" |
Placeholder text for the input. |
allowClear |
bool |
true |
Show a clear button (X) to reset the value. |
dropdownParent |
string |
"" |
Appends the dropdown to a specific element. Very useful inside Bootstrap Modals (e.g., '#myModal'). |
debounceTime |
int |
500 |
Delay in milliseconds before firing the AJAX request. |
class |
string |
'' |
Extra CSS classes injected directly to the <select> element. |
theme |
string |
'' |
Select2 theme (e.g., 'bootstrap-5'). |
multiple |
bool |
false |
Set to true to allow arrays of selections. |
multipleSelection |
bool |
false |
When true in AJAX multiple mode, allows selecting all loaded search results at once. |
disabled |
bool |
false |
Disables the Select2 input entirely. |
Data Binding & Format
Because Livewire components pass data over the wire, the bound value representation is always an object or an array of objects, representing the selected id and text.
For single selection:
For multiple selections:
Troubleshooting: Modals
If your Select2 input isn't clickable or doesn't show properly inside a Bootstrap Modal, you need to set the dropdownParent property to target your modal element.
License
This package is distributed under the MIT license.