Select2 show result but can’t select Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Select2 show result but can’t select without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am building a CRM project with Laravel 8. I want to use select2 but there is something wrong. I can’t select after first select. It looks like this and I can’t select.

enter image description here

HTML:

<div class="form-row">
    <div class="col-md-12">
        <div class="position-relative ">
            <label for="gondericiAdi">Göndericinin Adı:</label>
        </div>
        <div class="input-group">
            <select class="form-control" name="" style="width:100%;" id="gondericiAdi">
            </select>
        </div>
    </div>
</div>

Javascript:

$('#gondericiAdi').select2({
    ajax: {
        url: "/MainCargo/GetCurrents",
        type: "post",
        dataType: 'json',
        delay: 1000,
        data: function (params) {
            return {
                _token: token,
                currentSearchTerm: params.term, // search term,
                page: params.page || 1
            };
        },
        processResults: function (response) {
            return {
                results: response
            };
        },
        cache: true,
        theme: "bootstrap4",
        placeholder: "Select an option",
        tags: true,
    }
});

PHP:

public function getCurrents(Request $request)
{
    $Currents = DB::table('currents')
        ->where('name', 'like', '%' . $request->currentSearchTerm . '%')
        ->distinct()
        ->get(['name as text', 'current_code as id']);

    return response()->json($Currents, 200);
}

Thanks

Answer

I have tested it and it works fine .Here is the code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
    <div class="row">
        <div class="form-row">
            <div class="col-md-12">
                <div class="position-relative ">
                    <label for="gondericiAdi">Göndericinin Adı:</label>
                </div>
                <div class="input-group">
                    <select class="form-control" name="" style="width:100%;" id="gondericiAdi">
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('#gondericiAdi').select2({
        ajax: {
            url: "/test",
            type: "post",
            dataType: 'json',

            delay: 1000,
            data: function (params) {
                return {
                    "_token": "{{ csrf_token() }}",
                    currentSearchTerm: params.term, // search term,
                    page: params.page || 1
                };
            },
            processResults: function (response) {
                return {
                    results: response
                };
            },
            cache: true,
            theme: "bootstrap4",
            placeholder: "Select an option",
            tags: true,
        }
    });
</script>
</body>
</html>

In Laravel side

 if(request()->isMethod('POST')){
        $Currents = DB::table('users')
            ->where('name', 'like', '%' . request()->currentSearchTerm . '%')

            ->get(['name as text', 'id']);

        return response()->json($Currents, 200);
    }
    return view('welcome');
We are here to answer your question about Select2 show result but can’t select - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji