Searchable select with very large dataset


Topic: Searchable select with very large dataset

sdcain asked 2 years ago

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?


Maycon answered 2 years ago

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 commented 2 years 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 2 years ago

If everything works, you can tell me about it, best regards. Konrad.


Konrad Stępień staff answered 2 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.0.0
  • Device: Macbook
  • Browser: Firefox
  • OS: macOS Catalina
  • Provided sample code: No
  • Provided link: Yes