Select2 Array - Dropdown Search in Laravel Application

We can load data from the server and create a dropdown search using the select2 plugin. Select2 also allows remote data load using ajax requests. But did you know that we can create a dropdown search using select2 from an array? Yes, in this tutorial, I will show you how to create a multi-select dropdown search in laravel application with select2 data array.

So from this select2 data array tutorial, we will create a dropdown multiple data selection example. Let's see the preview that what we are going to make.

So let's see the source code of select2 data array search:

@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" style="background: gray; color:#f1f7fa; font-weight:bold;">
                    Laravel 9 Select2 Multi Select Dropdown With Search From Array  -  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" multiple name="Framework[]">
                                </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(){
    var data = [{
                    id: 0,
                    text: 'PHP'
                },
                {
                    id: 1,
                    text: 'LARAVEL'
                },
                {
                    id: 2,
                    text: 'Symphony'
                }
            ];
    $('.js-example-basic-single').select2({
        theme: "classic",
        placeholder: 'Search users',
        minimumInputLength: 2,
        data: data
    });
});
</script>
@endpush

 

Read also: How To Get Multiple Selected Values Of Select Box In Laravel

 

Conclusion

Hope this select2 data array tutorial will help. After completing this how to search data from array using select2 in laravel your concept will be clear about search data from array select2. Hope this multi select dropdown from array data select2 tutorial will clear your concept about select2 data array.