How to Create Select2 Dropdown in Laravel 8 Livewire

Last updated on by Digamber

Laravel 8 Livewire select2 dropdown dynamic search tutorial; in this comprehensive example, we will comprehend how to create dynamic dropdown using jQuery Select2 plugin in Laravel Livewire application.

This laravel livewire select2 dropdown example is incomplete without the Select2 package.

Select2 JavaScript-based package provides an uncomplicated solution for creating a customizable select box along with top-notch support for searching, tagging, remote data sets, infinite scrolling, and many other profoundly utilized options.

Laravel 8 Livewire Select2 Dropdown Dynamic Search Example

Here are the gradual steps that describe profoundly about the simple example of select2 dropdown dynamic search in the laravel livewire app:

  • Step 1: Create Laravel Project
  • Step 2: Add Livewire Package
  • Step 3: Create Select2 Component with Livewire
  • Step 4: Create Route
  • Step 5: Set Up Blade View
  • Step 6: Test Demo App

Create Laravel Project

Begin the first step by moving towards the console and invoke the command to create a new laravel app:

composer create-project --prefer-dist laravel/laravel d5-demo

Add Livewire Package

Livewire is a flexible full-stack framework for the Laravel ecosystem, which helps build compelling interfaces without undervaluing the ease of Laravel.

So, execute the provided command to add the livewire package in laravel:

composer require livewire/livewire

Create Select2 Component with Livewire

Further, you have to understand how to create livewire components for building livewire dynamic dropdown with select2.

Wherefore, head over to terminal and evoke the recommended command:

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

Create Route

Next, 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);

Set Up 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>

Test Demo App

Everything has been done; hence it’s time to check out what we have built. Consider starting the laravel app using the artisan command.

Consequently, open the console and execute the provided command:

php artisan serve

As you can see on the console base url manifested after invoking starting laravel development server, hence use the following url on the browser to run the laravel livewire select2 demo app:

http://127.0.0.1:8000

Laravel Livewire Select2 Dropdown Dynamic Search Example

Conclusion

The Laravel 8 Livewire select2 dropdown tutorial is over; in this tutorial, we have seen how to implement select2 in the laravel livewire application to build a dynamic search that displays the results within the dropdown. I reckon you will like this guide and share it with others.