Select2 Infinite Scrolling with Initial Data Load
Infinite Scrolling enabled on the DataSet.
Allows for Initial Data Load
HTML
<script src="https://jquery-json.googlecode.com/files/jquery.json-2.2.js"></script>
<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<link rel="stylesheet" href="http://ecos.fws.gov/js/bootstrap-2.0.3/css/bootstrap.css">
<div>
<select id="test" style="width:200px"></select>
</div>
JavaScript
var dbOptions = randomize(100);
function rand() {
return Math.random().toString(36).substring(2, 9);
}
function randomize(count) {
if(!count || count<=0) {
return;
}
var options = [];
for(var index=0; index<count; index++) {
var randomString = index + "-" + rand();
options.push({
"id": index,
"text": randomString
});
}
return options;
}
function getFilterData(term, page) {
var pageSize = 10;
var limit = page*pageSize;
var more = limit <= dbOptions.length;
var start = (page-1)*pageSize;
var slicedOptions = dbOptions.slice(start, limit);
var actualDelay = 1 + parseInt(Math.floor(Math.random() * 5), 10);
var data = {
json: $.toJSON({results: slicedOptions, more: more}),
delay: actualDelay
}
console.log("Setting post data as", data);
return data;
}
$(document).ready(function() {
$('#test').select2({
minimumInputLength: 3,
placeholder: 'Search',
ajax: {
url: "/echo/json/",
dataType: 'json',
type: "POST",
data: function(term, page) {
return getFilterData(term, page);
},
results: function(data, page ) {
console.log("Fetching results", data, page, arguments);
return data;
}
},
});
});