Laravel Livewire Select2 Dropdown Example Tutorial

Throughout Laravel 9 Livewire Select2 Dropdown Example example tutorial, we are going to share step by step guide how to create and use dynamic dropdown using jQuery Select2 plugin in Laravel Livewire application.

Livewire is a full-stack framework for Laravel framework that makes building dynamic interfaces simple, without leaving the comfort of Laravel. This laravel livewire select2 dropdown example is incomplete without the Select2 package.

How to Use Select2 Dropdown in Laravel 9 Livewire

Follow the following steps that describe profoundly about the simple example of select2 dropdown dynamic search in the laravel livewire app::

Step 1: Install Laravel App
Step 2: Connect App to Database
Step 3: Install Livewire Package
Step 4: Create Select2 Component
Step 5: Make Routes
Step 6: Create View File
Step 7: Run Development Server

Step 1: Install Laravel App

First create new laravel 9 application adding the following command in terminal.

composer create-project --prefer-dist laravel/laravel laravel-livewire-select2

Next, go inside the app:

cd laravel-livewire-select2

Step 2: Connect App to Database

Open the .env file and add your database credentials such as database name, username equally important password:

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=database name here 
DB_USERNAME=database username here 
DB_PASSWORD=database password here

Step 3: Install Livewire Package

In this step, execute the following command on terminal to install livewire package in laravel app:

composer require livewire/livewire

Step 4: Create Select2 Component with Livewire

In this step, create select2 dropdown components by executing the following command on terminal:

php artisan make:livewire select2-dropdown

There have been two files generated concurrently; here are the location of the file:

app/Http/Livewire/Select2Dropdown.php
resources/views/livewire/select2-dropdown.blade.php

Subsequently, open the app/Http/Livewire/Select2Dropdown.php file and update the suggested code:

<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Select2Dropdown extends Component
{
    public $ottPlatform = '';
 
    public $webseries = [
        'Wanda Vision',
        'Money Heist',
        'Lucifer',
        'Stranger Things'
    ];     
    public function render()
    {
        return view('livewire.select2-dropdown')->extends('layouts.app');
    }
}

Further, again open the app/resources/views/livewire/select2-dropdown.blade.php file and update the provided code:

<div>
    <div wire:ignore>
        <select class="form-control" id="select2-dropdown">
            <option value="">Select Option</option>
            @foreach($webseries as $item)
            <option value="{{ $item }}">{{ $item }}</option>
            @endforeach
        </select>
    </div>
</div>
@push('scripts')
<script>
    $(document).ready(function () {
        $('#select2-dropdown').select2();
        $('#select2-dropdown').on('change', function (e) {
            var data = $('#select2-dropdown').select2("val");
            @this.set('ottPlatform', data);
        });
    });
</script>
@endpush

Step 5: Make Routes

In this step, create route for accessing select2 dropdown for dynamically search and select the select options. So, open and update the routes/web.php file:

<?php
   
use Illuminate\Support\Facades\Route;
  
use App\Http\Livewire\Select2Dropdown;
   
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/
   
Route::get('/', Select2Dropdown::class);

Step 6: Configure Blade View

In the last step, create a new folder, name it layouts, keep it inside the views directory, also create an app.blade.php file within.

Hence, open resources/views/layouts/app.blade.php and update the file:

<!DOCTYPE html>
<html>
<head>
   
    <title>Laravel 8 Livewire Dropdown Example</title>
    @livewireStyles
    <link href="//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
    <div class="container">
        @yield('content')
    </div>
</body>
@livewireScripts
@stack('scripts')
</html>

Step 7: Run Development Server

Finally, we need to run the following PHP artisan serve command to start laravel livewire upload file app:

php artisan serve

If we want to run the project diffrent port so use this below command 

php artisan serve --port=8080

Now, we are ready to run laravel 9 livewire select2 app. So open browser and hit the following URL into browser:

http://127.0.0.1:8000

The Laravel Livewire Select2 Dropdown Example Example tutorial is over; in this tutorial, we learned the easiest way to create and use select2 dropdown using laravel livewire.