'Select2 with Angular works slow with more than 1500 data size

I am using select2 with Angular. I've got a lot of results (about 5k) opening select box is quite slow.

This is my component

    ngAfterViewInit(): void {
    
        $('#carrierSelector').select2({
    
          matcher: (params, data) => {
    
            const { value } = data.element;
            let filter:string = String(params.term).toLowerCase();;
            const { Name, CarrierId, CarrierName } = this.carriers.find((item:ICarrier) => item.index === parseInt(value));
    
            // If there are no search terms, return all of the data
            if ($.trim(params.term) === '') {
              return data;
            }
    
            if (Name.toLowerCase().indexOf(filter) > -1 ||
                CarrierId.toLowerCase().indexOf(filter) > -1 ||
                CarrierName.toLowerCase().indexOf(filter) > -1) {
    
                let modifiedData = $.extend({}, data, true);
                return modifiedData;
    
            }
    
            // Return `null` if the term should not be displayed
            return null;
    
          }
    
        });
    }

I tried a lot of ways like ajax, but it doesn't work for me



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source