Pharaonic
Loading...

Getting Started

Select2

# Why Select2?

Select2 is a package that helps you to use Select2 plugin in a simple way for livewire components.

# Installation

Install the latest version using Composer.

1composer require pharaonic/livewire-select2

Optional : Publish the JavaScript file

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

# Inclusion

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 @livewireScripts
13 
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>

# Usage

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>

# Attributes

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.

# Events

You can use the events to load Select2 all over the page or on a specific input.

1// Init Event
2$this->dispatchBrowserEvent('pharaonic.select2.init');
3 
4// Load Event
5$this->dispatchBrowserEvent('pharaonic.select2.load', [
6 'component' => $this->id,
7 'target' => '#input-here'
8]);

# Contributors

MoamenEltouny
18 Contributions