how are you?
I'm developing a form in my Wordpress installation to pull a large amount of terms/taxonomies, and for that I'm using Select2 in these fields. The problem is that we have more than 20,000 taxonomies and, even limiting the amount of letters to search, we are having a big delay in their selection.
Reading the Select2 documentation, I noticed that there is a possibility to load the results partially, as if working with an infinite scroll. I think this will help a lot in performance. I tried a few things, but all to no avail. I don't have much experience with JavaScript, and I'm really struggling to get it to work.
The part of the code responsible for displaying the results is as follows:
return {
ajax: applyFilters( 'jet.fb.select_autocomplete.ajax', {
delay: 250,
type: 'POST',
dataType: 'json',
data: function( { term } ) {
return {
action, term,
fieldName: scope.attr( 'data-field-name' ),
formId: scope.closest( 'form' ).data( 'form-id' ),
};
},
processResults: function( response ) {
if ( response.success ) {
return { results: response.data }
}
return { results: [] };
},
} ),
}
Could someone more experienced guide me to implement this feature?
Thank you very much :)
Luiz, Have you tried using server side calls to filter down your list? In my experience doing that and requiring 2 or more letters to start filtering helps out tremendously. Below is an example of what I've done before (it is pieced together from the docs here):
$('.js-data-example-ajax').select2({
ajax: {
url: 'https://api.github.com/search/repositories',
data:function(params){
term:params.term, //this is the search term to hit the server with
},
delay: 400,
dataType: 'json',
minimumInputLength: 2,
}
});
If this does not work for you still, I recommend looking into either pagination here or optimizing your search query.