Select2 显示结果但不能 select

Question

我正在使用 Laravel 8 构建 CRM 项目。我想使用 select2 但有问题。我不能在第一个 select 之后 select。看起来像这样，我不能 select.

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);
}

谢谢

Answer 1

我已经测试过了，它工作正常。这是代码

<!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>

在Laravel边

 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');

Select2 显示结果但不能 select

Select2 show result but can't select

javascript

laravel

jquery-select2