Use Select2 to Create Searchable Dropdown in Laravel

Sometimes we need HTML select box option to give users chose the required option. But sometimes we need even more like a select option with search. There is a beautiful jQuery plugin called select2. Using select2, we can easily implement a searchable dropdown in laravel 9. So in this tutorial, we will see, how to install select2 in laravel application and how to create a laravel 9 dropdown with search option using select2.

So if you do not know laravel 9 get selected value from dropdown in blade, then this how to use select2 in laravel 9 example is for you. Cause, we will use select2 to create this select box with search option in laravel.

See the preview below that what we are going to make:

So let's see the source code of laravel select2 example:

@extends('layouts.app')

@push('style')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    span.select2.select2-container.select2-container--classic{
        width: 100% !important;
    }
</style>
@endpush

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    Laravel 9 Dropdown With Search Example  -  Laravelia                
                </div>
                 <div class="card-body">                    
                    <form class="w-px-500 p-3 p-md-3" action="{{ route('user.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Framework</label>
                            <div class="col-sm-9 mt-3">
                                <select class="js-example-basic-single" name="Framework">
                                    <option value="CakePHP">Cake PHP</option>
                                    <option value="Laravel">Laravel</option>
                                    <option value="Symphony">Symphony</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label"></label>
                            <div class="col-sm-9">
                                <button type="submit" class="btn btn-success btn-block text-white">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function(){
    $('.js-example-basic-single').select2({
        theme: "classic"
    });
});
</script>
@endpush

Read also: Radio Button Checked If Condition In Laravel

Conclusion

Hope this searchable dropdown in laravel 9 tutorial will help. After completing this laravel 9 dropdown with search, your concept will be clear about laravel select with search. Hope this select box with search option in laravel tutorial will clear your concept about how to use select2 in laravel 9.

Use Select2 to Create Searchable Dropdown in Laravel

Mahedi Hasan

Conclusion