Select2 Ajax Laravel 5.2 - Paginated results not working? - ajax

Question

I have the following select2 to load remote data with pagination:
$(".js-location-lookup").select2({
ajax: {
url: '/locations',
dataType: "json",
delay: 150,
data: function (params) {
return {
term: params.term,
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: $.map(data.data, function (item) {
return {
id: item.id,
text: item.name
};
}),
pagination: {
more: (params.page * data.per_page) < data.total
}
};
},
cache: true
},
minimumInputLength: 2,
placeholder: "-- Select --",
allowClear: true
});
Controller action:
public function getLocations(Request $request)
{
$term = $request->input('term');
$data = Location::where('name', 'LIKE', '%'.$term.'%')->paginate(5);
$data->appends(['term' => $term ]);
return response()->json($data);
}
the json:
{
"total":22,
"per_page":5,
"current_page":1,
"last_page":5,
"next_page_url":"/locations?term=en&page=2",
"prev_page_url":null,
"from":1,
"to":5,
"data":[
{"id":1,"name":"England"},
{"id":13,"name":"London (Central)"},
{"id":18,"name":"North East England"},
{"id":23,"name":"North West England"},
{"id":30,"name":"South East England"}
]
}
Only the first page loads and displays the text load more results but it doesn't scroll or do anything to show the next set of results?

Answer 1

If the number of items per page when displayed is less than the height of the dropdown box when it is open then the scroll bars on the select widget do not appear and the above behavior is observed i.e. you are unable to scroll to load the next set of data.
The fix was to increase the pagination to 10 per page so that they are more than the height of the dropdown box.
Not sure if you would class this as a bug.

Answer 2

public function getdataforselect2(Request $request){
if ($request->ajax()) {
$term = trim($request->term);
$posts = DB::table('channels')->select('id','name as text')
->where('name', 'LIKE', '%' . $term. '%')
->orderBy('name', 'asc')->simplePaginate(10);
$morePages=true;
// $pagination_obj= json_encode($posts);
if (empty($posts->nextPageUrl())){
$morePages=false;
}
$results = array(
"results" => $posts->items(),
"pagination" => array(
"more" => $morePages
)
);
return \Response::json($results);
}
}
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<!--<![endif]-->
<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> <script >
(function() {
$("#channel_id").select2({
placeholder: 'Channel...',
// width: '350px',
allowClear: true,
ajax: {
url: '/dataforselect2',
dataType: 'json',
delay: 250,
data: function(params) {
return {
term: params.term || '',
page: params.page || 1
}
},
cache: true
}
});
})();
</script>
Code here!

Answer 3

Use the following codes with the latest select2 version library.
Controller Codes:
public function getLocations(Request $request)
{
if ($request->ajax()) {
$page = $request->page;
$resultCount = 5;
$offset = ($page - 1) * $resultCount;
$locations = Location::where('name', 'LIKE', '%' . $request->term. '%')
->orderBy('name')
->skip($offset)
->take($resultCount)
->selectRaw('id, name as text')
->get();
$count = Count(Location::where('name', 'LIKE', '%' . $request->term. '%')
->orderBy('name')
->selectRaw('id, name as text')
->get());
$endCount = $offset + $resultCount;
$morePages = $count > $endCount;
$results = array(
"results" => $locations,
"pagination" => array(
"more" => $morePages
)
);
return response()->json($results);
}
return response()->json('oops');
}
View/JS Codes:
$(document).ready(function() {
$('.js-location-lookup').select2({
delay : 200,
ajax: {
url: '/locations',
dataType: 'json',
cache: true,
data: function(params) {
return {
term: params.term || '',
page: params.page || 1
}
},
}
});
});