Блог

Главная - Вопросы по программированию - Select2 показывает результат, но не может выбрать

Select2 показывает результат, но не может выбрать

#javascript #laravel #jquery-select2

Вопрос:

Я создаю CRM-проект с Laravel 8. Я хочу использовать select2 , но что-то не так. Я не могу выбрать после первого выбора. Это выглядит так, и я не могу выбрать.

введите описание изображения здесь

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

Спасибо

Комментарии:

1. вы имеете в виду множественный выбор или он не будет выбирать один элемент после выбора ?

2. я хочу сделать одиночный выбор, но это не работает 🙁

3. попробуйте теги: ложь,

4. попробуйте теги: ложь не сработала.

5. Хорошо. я не пробовал в местных .позвольте мне попробовать один раз

Ответ №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>

На стороне Ларавеля

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

Комментарии:

1. Спасибо за вашу помощь

Метки: ,