Searchable select with very large dataset

Topic: Searchable select with very large dataset

sdcain free asked 4 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?

Add comment

Maycon free answered 4 years ago

1 0 Best answer

<p>Hi <a href="/profile/?id=86579" target="_blank" rel="nofollow">@sdcain</a>,</p>

<pre class="prettyprint"><code><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>
</code></pre>

<pre class="prettyprint"><code>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 = [];
         }
      });
  }
</code></pre>

Please insert min. 20 characters.

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 free commented 4 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 4 years ago

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

Add comment

Konrad Stępień staff answered 4 years ago