pagination dropdown options in Ajax js - ajax

Question

I have two select fields. States and cities. Displays a list of cities by state selection. But on Android phones, it appears very late(very slow). That's why I want to paginate.
how to pagination dropdown options in below my codes :
<script>
$('#stateCode').on('change',function(){
var stateID = $(this).val();
if(stateID){
$('.spinner').show();
$('#city').prop('disabled', 'disabled');
$.ajax({
type:"get",
dataType: 'json',
url:"{{url('cityjson/get-city-listz')}}?state_id="+stateID,
success:function(res){
$('.spinner').hide();
$('#city').prop('disabled', false);
if(res){
$("#city").empty();
$.each(res,function(key,value){
$("#city").append('<option value="'+value+'">'+key+'</option>');
});
}else{
$("#city").empty();
}
}
});
}else{
$("#city").empty();
}
});
</script>

Answer 1

Select2 comes with AJAX support built in, using jQuery's AJAX methods.
Include all the js and css plugins. Select2 4.0.0 or above needs to use.
In your HTML:
<select class="target" id="city"></select>
Note for below JS
items: contains the data that will be used and option
item object: each object contains {id:"1", test:"city 1"}
page: current page number
total_count: total number of cities for the state
term : this param can be used to search.
In your Javascript:
$("#city").select2({
ajax: {
url: "/cityjson/get-city-listz",
dataType: 'json',
data: function (params) {
return {
state_id:stateID,
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
}
});