How to Create Select2 Dropdown in Laravel Livewire

In this blog, we are going to understand how to create Select2 Dropdown in Laravel Livewire. For Seclect2 in Livewire, we will be using 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.

Here are the steps we will be using to create Laarvel Livewire Select2 Dropdown,

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

Let's begin the first step by creating laravel project using the console:

composer create-project --prefer-dist laravel/laravel select2-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

Now, we have to create a Livewire component for building a dynamic select2 dropdown.

Let's create this select2 component with command line,

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>

<option value="">Select Option</option>

@foreach($webseries as $item)

@endforeach

</select>

</div>

@push('scripts')

$(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 a route for accessing the select2 dropdown for dynamic 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

</head>

<body>

@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/