I am looking to enhance the search functionality for my select2 dropdown. My goal is to trigger a service call with the search parameters once 3 characters are typed into the search field.
However, when I try to select an option from the dropdown, I encounter an error: TypeError (Cannot read property 'machineService' of null). It seems that the service is not initialized properly before the getSelectOptions method is called.
Below is the HTML code snippet:
<select2 id="inputMachine"
[data]="machinesModel.data"
[options]="machinesModel.options"
[width]="'100%'"
[disabled]="machinesModel.isDisabled()"
(valueChanged)="machinesModel.onValueChanged($event); onSelectedMachinesChanged($event)">
</select2>
And here is the relevant component code:
protected getSelectOptions(placeholder: string) {
return {
allowClear: false,
placeholder: this.translate.instant(placeholder),
multiple: true,
minimumInputLength: 3,
theme: 'bootstrap',
query: function (options) {
this.machineService.findProjections(options.term).subscribe(
machines => {
this.setMachines(machines);
options.callback(this.machinesModel.data);
},
error => {
console.log('Could not load machines: ', error);
}
);
}
};
}
Any insights or suggestions would be greatly appreciated. Thank you!