After reviewing the tutorial on the Select2 project page, I am implementing a feature to load additional records as the user scrolls to the end of the results.
<script>
$(document).ready(function() {
$('#style_full_name').select2({
placeholder: "Please type in the make and model",
minimumInputLength: 3,
ajax: {
url: "/list_styles",
dataType: 'json',
quietMillis: 100,
data: function (term, page) { // page is the one-based page number tracked by Select2
return {
q: term, //search term
page_limit: 10, // page size
page: page, // page number
};
},
results: function (data, page) {
var more = (page * 10) < data.total; // determining if there are more results available
// returning the value of more so Select2 can load additional results if needed
return {results: data.styles, more: more};
}
},
formatResult: styleFormatResult, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop", // applying css to adjust dropdown height
escapeMarkup: function (m) { return m; } // not escaping markup since html is displayed in results
});
function styleFormatResult(style) {
var markup = "<table class='style-result'><tr>";
if (style.dimage_url !== undefined) {
markup += "<td class='style-image'><img src='" + style.dimage_url + "'/></td>";
}
markup += "<td class='style-info'><div class='style-title'>" + style.full_name + "</div>";
markup += "</td></tr></table>"
return markup;
}
});
</script>
When testing the Rotten Tomatoes API from Select2's page and monitoring the network panel in Chrome console, a callback is triggered when scrolling to the bottom of the list. However, in my implementation above, this functionality is not working as expected.