I must have missed something in the documentation. I am able to get the ajax call to work and get my results. Where I am falling apart if how to populate the resutls under the search field while the user is typing.
I understand the function $('#products-list').select2(); that initializes a new dropdown with the results, but removes the search field. I want to show the search field populated with results, then the user can choose one of the populated results.
what am I missing?
The code below when executed, provides jquery error
jQuery.Deferred exception: Cannot read properties of undefined (reading ‘slice’) TypeError: Cannot read properties of undefined (reading ‘slice’)
$(document).ready(function() {
$('#products-list').select2({
placeholder: "search items",
width: '100%',
minimumInputLength: 2,
ajax: {
url: "url",
dataType: 'json',
/*contentType:"application/json; charset=utf-8",*/
type: "POST",
data: function ( term ) {
return 'search-model=products&search-index=code&search-value=' + term.term;
},
processResults: function ( data, params ) {
console.log(data);
let elements;
for (var i = 0; i < data.num_rows; i++) {
//elements += '<option value="' + data.products[i].id + '">' + data.products[i].title + ' ' + data.products[i].code + ',( ' + data.products[i].price + ')</option>';
//The third parameter of new Option(...) determines whether the item is "default selected"; i.e. it sets the selected attribute for the new option. The fourth parameter sets the options actual selected state - if set to true, the new option will be selected by default.
//element = new Option( data.products[i].title, data.products[i].id, false, false );
elements += new Option( data.products[i].code, data.products[i].id, false, false );
$('#products-list').append( new Option( data.products[i].code, data.products[i].id, false, false ) ).trigger('change');
return { resultsData: elements };
}
//$('#products-list').select2();
}
}
});//$('#products-list').select2(
});//$(document).ready(function()