Reset Angular Material autocomplete upon selection

Question

Reset Angular Material autocomplete upon selection

The issue I'm encountering is as follows: when an option is chosen from the autocomplete input, it should not only add a chip to the Angular Material Chips component (which it currently does), but also clear the autocomplete input so that another option can be selected.

Here is the HTML code:

<div class="col-md-6">
   <md-form-field>
      <input type="text" placeholder="Categoría" aria-label="Categoría" mdInput [mdAutocomplete]="auto" [formControl]="categoryCtrl">
      <md-autocomplete #auto="mdAutocomplete" (optionSelected)="selectCategory($event)">
         <md-option *ngFor="let category of filteredCategories | async" [value]="category.name">
            {{ category.name }}
         </md-option>
      </md-autocomplete>
   </md-form-field>
</div>

This is my TypeScript implementation:

constructor(private placeService: PlaceService, private categoryService: CategoryService) {
    this.categoryCtrl = new FormControl();
    this.filteredCategories = this.categoryCtrl.valueChanges
        .startWith('')
        .map(category => category ? this.filterCategories(category) : this.categories.slice());
}

filterCategories(name: string) {
    return this.categories.filter(category => category.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}

selectCategory(category: any) {
    const index = this.selectedCategories.indexOf(category.option.value);
    if (index === -1) {
        this.selectedCategories.push(category.option.value)
    }
}

I have reviewed the Angular Material documentation, but have not come across a method that accomplishes this task.

Thank you.

angular typescript autocomplete angular-material2

Answer 1

Answer №1

It seems like you're almost there, but don't forget to reset the form control value in selectCategory. Here's how we handled it in our own application:

/** Autocomplete trigger reference. */
@ViewChild(MdAutocompleteTrigger)
private trigger: MdAutocompleteTrigger;

/** Input form control. */
searchControl = new FormControl('');

ngAfterViewInit() {
  // Clear input and emit when selection is made
  this.trigger.autocomplete.optionSelected
    .map(event => event.option)
    .subscribe(option => {
      // May need to deselect depending on your needs
      option.deselect();

      // Emit selection for parent component to add chip
      this.selection.emit(option.value);

      // Reset input value
      this.searchControl.setValue('');
    });
}

When a value is selected, there may be a brief "flash" of the text. To prevent this, use the displayWith property to display selected values as empty:

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayNull">
  ...
</md-autocomplete>

/** Display function for selected autocomplete values. */
displayNull(value) {
  return null;
}

Answer 2

It seems like you're almost there, but don't forget to reset the form control value in selectCategory. Here's how we handled it in our own application:

/** Autocomplete trigger reference. */
@ViewChild(MdAutocompleteTrigger)
private trigger: MdAutocompleteTrigger;

/** Input form control. */
searchControl = new FormControl('');

ngAfterViewInit() {
  // Clear input and emit when selection is made
  this.trigger.autocomplete.optionSelected
    .map(event => event.option)
    .subscribe(option => {
      // May need to deselect depending on your needs
      option.deselect();

      // Emit selection for parent component to add chip
      this.selection.emit(option.value);

      // Reset input value
      this.searchControl.setValue('');
    });
}

When a value is selected, there may be a brief "flash" of the text. To prevent this, use the displayWith property to display selected values as empty:

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayNull">
  ...
</md-autocomplete>

/** Display function for selected autocomplete values. */
displayNull(value) {
  return null;
}

Answer 3

Answer №2

Here is my approach:

Within the template:

...
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayEmpty" (optionSelected)="handleSelection($event)">
...

In the component.ts file:

public handleSelection(event : MdAutocompleteSelectedEvent) : void
{
    event.option.deselect()
    this.performTask(event.option.value)
}

public displayEmpty()
{
    return null
}

Answer 4

Here is my approach:

Within the template:

...
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayEmpty" (optionSelected)="handleSelection($event)">
...

In the component.ts file:

public handleSelection(event : MdAutocompleteSelectedEvent) : void
{
    event.option.deselect()
    this.performTask(event.option.value)
}

public displayEmpty()
{
    return null
}

Answer 5

Answer №3

Recently stumbled upon a different approach, but I wasn't quite sold on the displayNull solution.

Here's my alternative solution that bears some resemblance:

component.html:

  <input matInput [matAutocomplete]="auto" (input)="filter($event.target.value)" #autoInput>
  <mat-autocomplete #auto [displayWith]="displayKey" (optionSelected)="emit($event, autoInput)">
  // ...
  </mat-autocomplete>

component.ts:

@Output() optionSelected = new EventEmitter<MatAutocompleteSelectedEvent>();

emit(event: MatAutocompleteSelectedEvent, ele: HTMLInputElement) {
  ele.value = '';
  ele.blur();
  this.filter('');
  this.optionSelected.emit(event);
}

Answer 6

Recently stumbled upon a different approach, but I wasn't quite sold on the displayNull solution.

Here's my alternative solution that bears some resemblance:

component.html:

  <input matInput [matAutocomplete]="auto" (input)="filter($event.target.value)" #autoInput>
  <mat-autocomplete #auto [displayWith]="displayKey" (optionSelected)="emit($event, autoInput)">
  // ...
  </mat-autocomplete>

component.ts:

@Output() optionSelected = new EventEmitter<MatAutocompleteSelectedEvent>();

emit(event: MatAutocompleteSelectedEvent, ele: HTMLInputElement) {
  ele.value = '';
  ele.blur();
  this.filter('');
  this.optionSelected.emit(event);
}

Answer 7

Answer №4

If you're working with reactive forms, the simplest method is to access the control and assign an empty string as its value.

To access the control: https://angular.io/api/forms/AbstractControl#get
To set the value: https://angular.io/api/forms/AbstractControl#setvalue

In my situation, I had to do the following:

<input [matAutocomplete]="auto" formControlName="currentContact" type="text" matInput placeholder="Location">

this.reactiveForm = this.formBuilder.group({currentContact: ['']})
this.reactiveForm.get('currentContact').setValue('');

Answer 8

If you're working with reactive forms, the simplest method is to access the control and assign an empty string as its value.

To access the control: https://angular.io/api/forms/AbstractControl#get
To set the value: https://angular.io/api/forms/AbstractControl#setvalue

In my situation, I had to do the following:

<input [matAutocomplete]="auto" formControlName="currentContact" type="text" matInput placeholder="Location">

this.reactiveForm = this.formBuilder.group({currentContact: ['']})
this.reactiveForm.get('currentContact').setValue('');

Reset Angular Material autocomplete upon selection

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Signatures overburdened, types united, and the call error of 'No overload matches'

A guide to mastering Nested Table creation in Angular

What is the best practice for inserting typescript definitions and writing them when the object already has a pre-existing definition?

The variable "theme" is referenced prior to being initialized

The element called 'userForm' cannot be found within the 'RootComponent' instance

Establish a many-to-many relationship in Prisma where one of the fields is sourced from a separate table

There seems to be a malfunction with the routing feature in the src/index.html file

Encountering Duplicate Key Error When Implementing Angular, MongoDB, and Express

How to Share Angular Modules Between Two Projects with Ivy Compilation Necessity

Creating a different type by utilizing an existing type for re-use

Using Angular 2 to toggle visibility based on a select box's value

Angular2 - Easily update form fields with just a click

Issue with extending mongoose.Document properly in NodeJS and TypeScript using a custom interface with mongoose

Issue with calling the component I've built in Angular

Error Encountered While Uploading to Firebase Functions: HTTP Error: 400, Mysterious Issue Un

How can the ordering of dynamically generated components be synchronized with the order of other components?

Adding ngrx action class to reducer registration

Encountered an error with Aurelia webpack 4 when trying to load a necessary CSS file during runtime

Tips for hiding a sidebar by clicking away from it in JavaScript

You are unable to call upon an object that may be of type 'undefined' in typescript