select2 ajax get data

web.php faylı

Route::get('/backend', [BackendController::class,'index'])->name('backend.index');

BackendController.php faylı

<?php

namespace App\Http\Controllers;

use App\Models\User;

class BackendController extends Controller
{
    public function index()
    {
        $search = \request('term');

        $query = User::query();
        if ($search) {
            $query->where('name', 'like', '%' . $search . '%');
        }

        $users = $query->paginate(30);

        return response()->json($users);
    }
}

users.blade.php faylı

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select2 with Laravel and AJAX</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

<select id="mySelect" style="width: 300px;">
    <option value="">İstifadəçi axtarın...</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/az.min.js" integrity="sha512-5h/4MstAOhpL8LHF6e7tTEv31xdr5wY7JL9w7nqOI2zs/tL1ofuRfX+g+RwJ7l/3xc5cIAeLMLne6m+QYX67hg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function() {
        $('#mySelect').select2({
            language: "az",
            ajax: {
                url: '{!! route('backend.index') !!}',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.q,
                        term: params.term,
                        sku_id: {{ request()->segment(3) }} // additional parameter
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.data,
                        pagination: {
                            more: data.next_page_url !== null
                        }
                    };
                },
                cache: true
            },
            // minimumInputLength: 1,
            placeholder: 'İstifadəçi axtarın...',
            escapeMarkup: function(markup) {
                return markup;
            },
            templateResult: function(data) {
                return data.name;
            },
            templateSelection: function(data) {
                return data.name;
            },

        });
    });
</script>

</body>
</html>

by Rahim Süleymanov | Feb 26, 2024