Hi, I am using Select2 AJAX and it works fine, but there are two situations I have.
The first detail I have is that when the user clicks on the select to search for an option, it displays message of
“The result could not be loaded”, I don’t know why and how can I avoid it (so as not to give a negative effect to the user).
The second detail is how to achieve that when the user clicks on the select, the list of options is displayed, and then the user can start typing the search required.
This is the code I am using
<select class="select2" id="user-select" style="width: 50%;"></select>
<script>
$(document).ready(function() {
$('#user-select').select2({
ajax: {
url: 'search_customers',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term
};
},
processResults: function (data, params) {
return {
results: data.filter(function(user) {
return user.nombre.toLowerCase().includes(params.term.toLowerCase());
}).map(function(user) {
return { id: user.id, text: user.nombre };
})
};
},
cache: true
},
minimumInputLength: 0,
placeholder: 'Busca un usuario',
allowClear: true
});
$(document).on('select2:open', () => {
document.querySelector('.select2-container--open .select2-search__field').focus();
});
});
</script>
I appreciate any help
Regards,
Javier