Activate Angular Material's autocomplete feature once the user has entered three characters

Question

Activate Angular Material's autocomplete feature once the user has entered three characters

My goal is to implement an Angular Material Autocomplete feature that only triggers after the user has inputted at least three characters. Currently, I have it set up so that every click in the input field prompts an API call and fetches all the data, which is not ideal.

What I envision and aim to achieve is for the API call to be triggered only when the user has typed in a minimum of three characters, and for the autocomplete options to display only the matching results in the mat-option element.

If my explanation isn't clear enough, please let me know in the comments below.

Below you can find the code snippets:

dashboard.component.html:

<form [formGroup]="dasboardSearchForm" class="dashboardSearch">
  <div class="form-fields">
    <mat-form-field class="dashboard-search">
      <mat-label>Search users...</mat-label>
      <input type="text" matInput [formControl]="myControl" placeholder="search users..." [matAutocomplete]="auto" (change)="onSelected($event)">
      <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" >
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option" routerLink="/customers/customers/{{option.id}}">
          {{option.name}}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  </div>
</form>

dashboard.component.ts:

  onSelected(event: any) {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      switchMap(value => this._filter(value))
    );
    console.log('onSelected: ', this.filteredOptions);
  }

  displayFn(user: AutocompleteCustomers): string {
    return user && user.name ? user.name : '';
  }

  private _filter(value: string) {
    const filterValue = value.toLowerCase();
    return this.dashboardService.getCustomers().pipe(
      filter(data => !!data),
      map((data) => {
        debounceTime(3000); // Placeholder for potential error?
        console.log(data);
        return data.filter(option => option.name.toLowerCase().includes(filterValue));
      })
    )
  }

dashboard.service.ts:

  getCustomers(): Observable<AutocompleteCustomers[]> {
    return this.httpClient.get<AutocompleteCustomers[]>(`${environment.apiUrl}data/customers`);
  }

And here is the model interface for Observables:

export interface AutocompleteCustomers {
  id: string;
  name: string;
}

javascript angular typescript angular-material autocomplete

Answer 1

Answer №1

If you're searching for the right function, look no further than the RxJS filter operator.

const filteredChanges = this.myControl.valueChanges.pipe(
  filter((value) => value.length >= 3)
);

While that may solve one issue, there are multiple other concerns in your code.

The autocomplete won't trigger because the changes observer is only set up after a user selects an option – a catch-22 situation. To remedy this, move the valueChanges observer to the class constructor or assign it directly to a class property.
You need to use debounceTime in a pipe. Your current setup merely creates an observable without utilizing it effectively. Also, debouncing HTTP responses seems odd. Instead, debounce input changes to reduce backend requests and handle responses properly.

Here's a basic outline of how it should be implemented:

class DashboardComponent {

  // ...

  public filteredOptions = this.myControl.valueChanges.pipe(
    filter((value) => value?.length > 3),
    debounceTime(500),
    switchMap(value => this._filter(value))
  );

  private _filter(value: string) {
    const filterValue = value.toLowerCase();
    return this.dashboardService.getCustomers().pipe(
      map((data) => {
        if (!data) {
          return [];
        }
        return data.filter(option => option.name.toLowerCase().includes(filterValue));
      })
    )
  }
}

It might be more efficient to send the query to the server and retrieve matching customers only. If client-side search is necessary, load customers once and reuse the list during searches.

class DashboardComponent {

  // ...

  private customers = [];

  public filteredOptions = this.myControl.valueChanges.pipe(
    filter((value) => value?.length > 3),
    map((value) => {
      const query = value.toLowerCase();
      return this.customers.filter(customer => customer.name.toLowerCase().includes(query))
    }),
  );

  constructor(private dashboardService: DashboardService) {
    this.dashboardService.getCustomers().subscribe((data) => {
      this.customers = data || [];
    });
  }
}

Answer 2

If you're searching for the right function, look no further than the RxJS filter operator.

const filteredChanges = this.myControl.valueChanges.pipe(
  filter((value) => value.length >= 3)
);

While that may solve one issue, there are multiple other concerns in your code.

The autocomplete won't trigger because the changes observer is only set up after a user selects an option – a catch-22 situation. To remedy this, move the valueChanges observer to the class constructor or assign it directly to a class property.
You need to use debounceTime in a pipe. Your current setup merely creates an observable without utilizing it effectively. Also, debouncing HTTP responses seems odd. Instead, debounce input changes to reduce backend requests and handle responses properly.

Here's a basic outline of how it should be implemented:

class DashboardComponent {

  // ...

  public filteredOptions = this.myControl.valueChanges.pipe(
    filter((value) => value?.length > 3),
    debounceTime(500),
    switchMap(value => this._filter(value))
  );

  private _filter(value: string) {
    const filterValue = value.toLowerCase();
    return this.dashboardService.getCustomers().pipe(
      map((data) => {
        if (!data) {
          return [];
        }
        return data.filter(option => option.name.toLowerCase().includes(filterValue));
      })
    )
  }
}

It might be more efficient to send the query to the server and retrieve matching customers only. If client-side search is necessary, load customers once and reuse the list during searches.

class DashboardComponent {

  // ...

  private customers = [];

  public filteredOptions = this.myControl.valueChanges.pipe(
    filter((value) => value?.length > 3),
    map((value) => {
      const query = value.toLowerCase();
      return this.customers.filter(customer => customer.name.toLowerCase().includes(query))
    }),
  );

  constructor(private dashboardService: DashboardService) {
    this.dashboardService.getCustomers().subscribe((data) => {
      this.customers = data || [];
    });
  }
}

Activate Angular Material's autocomplete feature once the user has entered three characters

Answer №1

Similar questions

What is the best way to create a promise in a basic redux action creator?

Encountering: Unable to break down the property 'DynamicServerError' of 'serverHooks' as it does not have a defined value

What are the steps to update content by referencing an id in the hash URL?

The specified type `Observable<Pet>&Observable<HttpResponse<Pet>>&Observable<HttpEvent<Pet>>` is not compatible with `Observable<HttpResponse<Pet>>`

Leveraging both onmouseover and onmouseout for container expansion

Prevent textArea from reducing empty spaces

The readyState of Ajax is consistently anything but 4

Creating a personalized event using typescript

Applying jQuery .animate() to elements without specifying position: absolute

Monitor the collection for changes before adding an item to the collection

Error encountered while invoking web server method in C# through ajax resulting in a 500 Internal Server Error

Dygraphs.js failing to display the second data point

SCRAM-SERVER-FIRST-MESSAGE: The client's password is required to be in string format

How to prevent unnecessary new instances from being created by the Inject() function in Angular

Unable to enhance Request using Typscript in nodejs

Having trouble retrieving the attribute of an appended element in jQuery?

Assign the Firebase token to the JavaScript cookie value

How can you prevent videos from constantly reloading when the same source is used in multiple components or pages?

npm build issues stemming from browserlist configurations

Utilize an Angular HttpInterceptor to invoke a Promise