Блог

Я смог реализовать выпадающий список с возможностью поиска благодаря помощи select2 bootstrap. Если я нажму на выпадающий список, в первой строке появится панель поиска, где я мог бы ввести имя пользователя, и в то же время я мог бы вручную выбрать его, прокручивая вниз.

Однако, если данные уже достигли 3000, выпадающий список отображается до самого низа, что выглядит беспорядочно. Итак, чтобы привести в порядок вещи, я хотел бы ограничить отображаемых пользователей только 10, а последняя строка — «Загрузить больше …». Если я прокрутил полосу прокрутки в нижней части, она должна загрузить следующие 10, что делается путем получения следующих 10 пользователей из UsersController. Я использую нумерацию страниц из контроллера, поэтому у меня нет проблем с этим.

Моя проблема в том, как я могу определить, что полоса прокрутки достигает дна, чтобы я мог указать начальной загрузке select2 загружать следующих 10 пользователей? Загрузчик select2 создает панель поиска и выпадающий список с возможностью прокрутки динамически, если я нажимаю выпадающий список, и я не могу понять, как я могу определить, достигла ли полоса прокрутки уже нижней.

users.blade.php

 @section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/localization/messages_ja.js" defer></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" defer/>
    <link href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.3.4/dist/select2-bootstrap4.min.css" rel="stylesheet" defer/>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js" defer></script>
    <script type="module" defer>
        $(document).ready(function () {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            let setUserSelectList = function (data) {
                let $sel = $('#userId');
                $sel.children('option:gt(0)').remove();
                
                $.each(data, function (index, value) {
                    let status = !value.is_active ? ' ('   value.status_name   ')' : '';
                    $sel.append('<option value="'   value.id   '">'   value.name   status   '</option>');
                });

                $sel.append('<option>'   'Load more...'   '</option>');

                $sel.select2({
                    data: data,
                    theme: 'bootstrap4'
                });

                return $sel;
            };

            $('#create-meter').click(function () {
                $.when(
                    $.get('user/select-list', function (data) {
                        setUserSelectList(data);
                    })
                ).done(function() {
                });
            });
        });
    </script>
@endsection

@section('content')
<div class="container">
     <div class="row mt-1 col-sm-10">
        <a href="javascript:void(0)" class="btn btn-primary " id="create-meter">Fetch Users</a>
        <label for="userId" class="col-sm-1 col-form-label">Name:</label>
        <div class="col-sm-2">
            <select class="form-control" id="userId" name="user_id" required>
            </select>
        </div>
    </div>
</div>
 

UsersController.php

 public function listForSelect()
{
    // $userList = User::paginate(4); //I wanted to implement this  
    $userList = User::all();  
    return response()->json($userList);
}