Topic: Searchable select with very large dataset
In your examples for a searchable select here: https://mdbootstrap.com/docs/angular/forms/select/#e-search-box
Is there a way to make the search trigger a data lookup in real time? Sort of like you've done for autocomplete here: https://mdbootstrap.com/docs/angular/forms/autocomplete/#remoteData
My issue is my data set is very large, 10k+ records, and this causes the select box to lag when trying to open it up, it hangs for a good 5 seconds before showing the data. To prevent this, I would rather not load any data until the search box has been typed in which would result in a much smaller dataset to display.
If that isn't possible, is there a way to improve the performance of the searchable select so it can handle thousands of records?
Hi @sdcain,
Try this
.html
<form [formGroup]="testForm">
<div class="md-form">
<input
formControlName="testAutocomplete"
type="text"
class="completer-input form-control mdb-auto-completer mb-0"
[mdbAutoCompleter]="auto"
placeholder="Pick the Star Wars character"
/>
<mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
<mdb-option *ngFor="let option of results" [value]="option.name">
<div class="d-flex flex-column">
<strong>Name: {{ option.name }}</strong>
<small>Gender: {{ option.gender }}</small>
<small>Hair color: {{ option.hair_color }}</small>
</div>
</mdb-option>
</mdb-auto-completer>
</div>
</form>
.ts
import { FormGroup, FormControl } from "@angular/forms";
import { debounceTime } from "rxjs/operators";
import { HttpClient } from "@angular/common/http";
constructor(private httpClient: HttpClient) {}
testForm: FormGroup;
url = "https://swapi.co/api/people/?search=";
results: any = [];
ngOnInit() {
this.testForm = new FormGroup({
testAutocomplete: new FormControl("")
});
this.testForm.controls.testAutocomplete.valueChanges
.pipe(debounceTime(200))
.subscribe((val: string) => {
if (val) {
this.httpClient.get(this.url + val).subscribe((data: any) => {
this.results = data["results"];
});
} else {
this.results = [];
}
});
}
sdcain pro premium priority commented a year ago
Though I wish this could be done with the select box, I can make this work. I will have to add a validator or a reset function if the user types something that doesn't exist in my data set so they can't submit invalid records.
Konrad Stępień staff commented a year ago
If everything works, you can tell me about it, best regards. Konrad.
Hi @sdcain,
For this time it is not possible. We have in plan to refactor select component, but we don't know when we push changes for production.
Sorry for problems, and best regards.
Answered
- User: Pro
- Premium support: Yes
- Technology: Angular
- MDB Version: 9.0.0
- Device: Macbook
- Browser: Firefox
- OS: macOS Catalina
- Provided sample code: No
- Provided link: Yes