README

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:

composer require lara-pack/livewire-select2

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.

<livewire:lara-pack.livewire-select2
  wire:model="selectedCity"
  :options="[
        ['id' => '1', 'text' => 'Jakarta'],
        ['id' => '2', 'text' => 'Bandung'],
        ['id' => '3', 'text' => 'Surabaya']
    ]"
  placeholder="Pilih Kota"
/>

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" }, ...].

<livewire:lara-pack.livewire-select2
  wire:model="selectedUser"
  url="{{ route('api.users') }}"
  :minimumInputLength="3"
  placeholder="Cari user berdasarkan nama..."
/>

3. Multiple Selections

Enable multiple selection mode by passing :multiple="true".

<livewire:lara-pack.livewire-select2
  wire:model="selectedTags"
  url="{{ route('api.tags') }}"
  :multiple="true"
  placeholder="Pilih beberapa tag"
/>

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.

<livewire:lara-pack.livewire-select2
  wire:model="selectedProducts"
  url="{{ route('api.products') }}"
  :multiple="true"
  :multipleSelection="true"
/>

Available Properties

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:

// In your Livewire Component Controller
public $selectedCity = ['id' => '1', 'text' => 'Jakarta'];

For multiple selections:

// In your Livewire Component Controller
public $selectedTags = [
    ['id' => '1', 'text' => 'PHP'],
    ['id' => '2', 'text' => 'Laravel']
];

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.

<livewire:lara-pack.livewire-select2 ... dropdownParent="#yourModalId" />

License

This package is distributed under the MIT license.