title: How to add "Load More" functionality in Select2 bootstrap searchable for Jquery by using Eloquent Pagination from Laravel?
body: <p>I was able to implement a searchable drop down thanks to the help of select2 bootstrap. If I click the dropdown, it will show on the first row a search pane where I could type the name of the user and at the same time, I could manually pick it by scrolling down.</p>
  <p>However, if the data already reaches 3000, the dropdown shows until the bottom which looks messy. So to tidy up things, I would like to limit the users displayed by only 10 and the last row is a &quot;Load more...&quot;. If I scrolled the scroll bar at the bottom-most part, it should load the next 10 which is done through getting the next 10 users from the UsersController. I use paginate from the controller so I have no problem with this.</p>
  <p>My problem is how can I detect the scrollbar is reaching the bottom, so that I can tell the select2 bootstrap to load the next 10 users? The select2 bootstrap creates a search bar, and the scrollable dropdown list dynamically, if I press the dropdown and I can't figure out how I can detect if the scroll bar already reached the bottom.</p>
  <p><code>users.blade.php</code></p>
  <pre><code>@section('script')
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.js&quot; defer&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/localization/messages_ja.js&quot; defer&gt;&lt;/script&gt;
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css&quot; rel=&quot;stylesheet&quot; defer/&gt;
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.3.4/dist/select2-bootstrap4.min.css&quot; rel=&quot;stylesheet&quot; defer/&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js&quot; defer&gt;&lt;/script&gt;
      &lt;script type=&quot;module&quot; defer&gt;
          $(document).ready(function () {
  
              $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name=&quot;csrf-token&quot;]').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('&lt;option value=&quot;' + value.id + '&quot;&gt;' + value.name + status + '&lt;/option&gt;');
                  });
  
                  $sel.append('&lt;option&gt;' + 'Load more...' + '&lt;/option&gt;');
  
                  $sel.select2({
                      data: data,
                      theme: 'bootstrap4'
                  });
  
                  return $sel;
              };
  
              $('#create-meter').click(function () {
                  $.when(
                      $.get('user/select-list', function (data) {
                          setUserSelectList(data);
                      })
                  ).done(function() {
                  });
              });
          });
      &lt;/script&gt;
  @endsection
  
  @section('content')
  &lt;div class=&quot;container&quot;&gt;
       &lt;div class=&quot;row mt-1 col-sm-10&quot;&gt;
          &lt;a href=&quot;javascript:void(0)&quot; class=&quot;btn btn-primary &quot; id=&quot;create-meter&quot;&gt;Fetch Users&lt;/a&gt;
          &lt;label for=&quot;userId&quot; class=&quot;col-sm-1 col-form-label&quot;&gt;Name:&lt;/label&gt;
          &lt;div class=&quot;col-sm-2&quot;&gt;
              &lt;select class=&quot;form-control&quot; id=&quot;userId&quot; name=&quot;user_id&quot; required&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><code>UsersController.php</code></p>
  <pre><code>public function listForSelect()
  {
      // $userList = User::paginate(4); //I wanted to implement this  
      $userList = User::all();  
      return response()-&gt;json($userList);
  }
  </code></pre>