Laravel 8 Livewire Autocomplete Select2 Dropdown Search Tutorial

Laravel 8 Livewire Autocomplete Select2 Dropdown tutorial; throughout this tutorial, you will find out how to build dynamic autocomplete search select dropdown feature in Laravel 8 app using Livewire and Select2 library.

Select2 is a user-friendly, powerful JavaScript library, which allows you to create impeccable searching, tagging, remote data sets, infinite scrolling functionalities. Customization of select dropdown elements is easy with the Select2 plugin, and you can extent dynamic features in a select dropdown with this library.

This Laravel Select2 dropdown example will show you how to use this quintessential package to add dynamic autocomplete search in select dropdown UI element from scratch.

Laravel 8 Livewire Select2 Dropdown Dynamic Autocomplete Search Example

You have to follow these steps to integrate dynamic autocomplete search in select dropdown for laravel application.

  • Step 1: Setting Up Laravel App
  • Step 2: Install Livewire Library
  • Step 3: Configure Livewire Select2 Component
  • Step 4: Build Route
  • Step 5: Create Blade View
  • Step 6: Start Laravel Project

Create Laravel Project

You have to use the following command to create the laravel project, nonetheless ensure you have composer package installed on your development system:

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

Install Livewire Library

In this step, make sure to install livewire package in laravel app, hence execute the command to add the package:

composer require livewire/livewire

Configure Livewire Select2 Component

Now, you will create the reusable component using the livewire library. To do so, open the console and execute the command to manifest the livewire select2 dynamic component.

php artisan make:livewire select2-auto-search

Eventually, livewire created two files, one for blade view another for component, so head over to app/Http/Livewire/Select2AutoSearch.php file and update the recommended code:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Select2AutoSearch extends Component
{
    public $viralSongs = '';
 
    public $songs = [
        'Say So',
        'The Box',
        'Laxed',
        'Savage',
        'Dance Monkey',
        'Viral',
        'Hotline Billing',
    ];

    public function render()
    {
        return view('livewire.select2-auto-search')->extends('layouts.app');
    }
}

Ideally, move inside the app/resources/views/livewire/select2-auto-search.blade.php file and add the given below code:

<div>

    <div wire:ignore>
        <select class="form-control" id="select2">
            <option value="">Choose Song</option>
            @foreach($songs as $data)
            <option value="{{ $data }}">{{ $data }}</option>
            @endforeach
        </select>
    </div>

</div>

@push('scripts')

<script>
    $(document).ready(function () {
        $('#select2').select2();
        $('#select2').on('change', function (e) {
            var item = $('#select2').select2("val");
            @this.set('viralSongs', item);
        });
    });

</script>

@endpush

Build Route

Create a route that requests to invoke select2 dropdown in laravel blade view, so add the following command on the routes/web.php file:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Select2AutoSearch;


Route::get('/', Select2AutoSearch::class);

Create Blade View

To configure the select2 dropdown view, you have to import the Bootstrap 5 CDN link at the top and add the Bootstrap 5 JavaScript CDN url. Theoretically, insert the select2 JavaScript URLs in the app blade view template.

Create layouts directory inside the resources/views folder, also create an app blade view file, once you followed the process then get inside the resources/views/layouts/app.blade.php file and insert the following code:

<!DOCTYPE html>
<html>

<head>

    <title>Laravel 8 Livewire Select2 Dropdown Autocomplete Search Example</title>

    @livewireStyles
    <link href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        id="bootstrap-css">
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/select2.min.js"></script>
</head>

<body>

    <div class="container">
        @yield('content')
    </div>

</body>

@livewireScripts
@stack('scripts')

</html>

Start Laravel Project

Starting a laravel project is simple you have to use the php artisan command to start the laravel development server, so run the offered command and start the app:

php artisan serve

You can use the displayed url on the terminal to get going with the demo project:

http://127.0.0.1:8000

Laravel 8 Livewire Autocomplete Select2 Dropdown Search

Conclusion

This extensive yet quick guide showed us the simple method to use select2 and livewire packages in the Laravel platform, and we have understood how to implement autocomplete search in Select dropdown in Laravel 8 application.