Select2 显示结果但不能 select

Question

I am building a CRM project with Laravel 8. I want to use select2 but there is something wrong.我正在使用 Laravel 8 构建一个 CRM 项目。我想使用select2但出现问题。 I can't select after first select.在第一个 select 之后，我不能 select。 It looks like this and I can't select.看起来像这样，我不能 select。

HTML: 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: 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: 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 1

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-06-05 17:31:34

Select2 显示结果但不能 select

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-06-05 17:31:34

解决方案1
0 已采纳 2021-06-05 17:31:34