CODEWITHSUNDEEP
angularrxjsangular-material
dorseyL221
dorseyL221

Reputation: 13

Dynamic Material Autocomplete Options With Type ahead

I am attempting to use the material autocomplete component to create multiple form fields within a page. These form fields need to have type ahead functionality so I'm utilizing the example on materials site for adding a custom filter. Everything is working as expected until I try to make an autocomplete update it's options based on another fields selection. The type ahead works correctly in both fields until I select an option in the first field. Once I do this the filtering by type ahead no longer works in the second field.

From what I've read, it seems as though I might be finalizing the observable for the second filtered options when I update its options after selecting one of the first fields options which would be causing the valueChanges observable to stop firing.

I haven't seen any examples of this type of capability, it seems that in most cases dynamic options based on other field values are implemented without the type ahead capability. Is something like this not possible?

See the below stackblitz for an example. Try type ahead in both fields (they should filter just fine). Then select an option from the first field. Try to type ahead again in the second field, it will no longer filter the options). https://stackblitz.com/edit/angular-lanw1g

Upvotes: 1

Views: 838

Answers (1)

Nimitt Shah
Nimitt Shah

Reputation: 4587

Second field is not filtering the values because you are not mapping new values again..

You are doing it on ngInit. You should do the same on numberSelected method also.

Just add below Code in numberSelected method

this.alphaOptions = ['Alpha Two', 'Bravo Two'];

this.filteredAlphaOptions = this.alpha.valueChanges
  .pipe(
    startWith(''),
    map(val => this.filterAlpha(val))
  );

Test it here

Enjoy!

Upvotes: 1

Related Questions