Hi Dev,
Today, I would like to share with you how to inetegrate select2 livewire in laravel application.I will show you a complete example for select2 multiple example with laravel livewire.
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.Livewire relies solely on AJAX requests to do all its server communicaton.
Here I will give full example for select2 in laravel livewire,So Lets follow the bellow step.
Step 1 : Install Laravel App
In First step, We need to get fresh laravel version application using bellow command. So Let's open terminal and run bellow command.
composer create-project --prefer-dist laravel/laravel blog
Step 2 : Setup Database Configuration
After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password
Step 3 : Install Livewire
In this step, You will simply install livewire to our laravel application using bellow command:
composer require livewire/livewire
Step 4 : Create Post Table
In this step, We have to create migration for products table using bellow artisan command. So let's open terminal and run bello command :
php artisan make:model Product -m
database/migrations/2021_06_05_044246_create_products_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateProductsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('category');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
}
App/Models/Product.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
protected $fillable = ['name','category'];
}
Step 5 : Create Component
Now, You can create livewire component using bellow command, So Let's run bellow command to create Select2 form component:
php artisan make:livewire Select2
Now they created fies on both path:
app/Http/Livewire/Select2.php
resources/views/livewire/select2.blade.php
Now first file we will update as bellow for Select2.php file.
app/Http/Livewire/Select2.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Product;
class Select2 extends Component
{
public $productList = [
'Fruit',
'Vegetable',
'Chocolate',
'Egg',
'Fish',
'Chemical',
'Dairy Product',
];
public $name,$category = [];
public function render()
{
return view('livewire.select2');
}
public function store()
{
$input = [
'name' => $this->name,
'category' => json_encode($this->category),
];
Product::create($input);
$this->name = '';
$this->category = '';
$this->emit('productStore');
}
}
Step 6 : Add Route
Now, we need to add route for create select2 dropdown and create product in laravel application. so open your "routes/web.php" file and add following route.
routes/web.php
Route::view('select2','livewire.home');
Step 8 : Create View
Here, we will create blade file for call route. in this file we will use @livewireStyles, @livewireScripts and @livewire('posts'). so let's add it.
resources/views/livewire/home.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Livewire Select2 Multiple Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha512-XKa9Hemdy1Ui3KSGgJdgMyYlUg1gM+QhL6cnlyTe2qzMCYm4nAZ1PsVerQzTTXzonUR+dmswHqgJPuwCq1MaAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@livewireStyles
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center mt-5">
<div class="col-md-8 mt-5">
<div class="card">
<div class="card-header bg-info text-white">
<h4>Laravel Livewire Select2 Multiple Example </h4>
</div>
<div class="card-body">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
@livewire('select2')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
@stack('scripts')
</body>
</html>
resources/views/livewire/select2.blade.php
<div>
<form wire:submit.prevent="store">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Name</label>
<input type="text" wire:model="name" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Category</label>
<div wire:ignore>
<select id="category-dropdown" class="form-control" multiple wire:model="category">
@foreach($productList as $product)
<option value="{{$product}}">{{ $product }}</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
</form>
</div>
@push('scripts')
<script>
$(document).ready(function () {
$('#category-dropdown').select2();
$('#category-dropdown').on('change', function (e) {
let data = $(this).val();
@this.set('category', data);
});
window.livewire.on('productStore', () => {
$('#category-dropdown').select2();
});
});
</script>
@endpush
Now we are ready to run our example so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/select2
It will help you..
