I currently have an input field that has an autocomplete, I’m trying to have essentially a two stage autocomplete for each entered item, for example typing I would show IP Address, selecting that enters “ipAddress=“ into the input, I would then like to display another autocomplete in the same input based on the selected option to display the available addresses. Then they would add a comma and repeat to add any other filters. I just am not sure what this would be called or how to implement this so any tips or ideas would be greatly appreciated
Try something like this:
TS:
itemList: any[] = [
{ name: "item1", IPForm: new FormControl(), AnotherListValue: [], AnotherForm: new FormControl() },
{ name: "item2", IPForm: new FormControl(), AnotherListValue: [], AnotherForm: new FormControl() }
];
// Fill my another value regarding to selected IP
onSelectedIP(selected: any, item: any) {
this.myService.getListValue(selected.IP).subscribe(result => item.AnotherListValue = result);
}
HTML
<div *ngFor="let item of itemList">
<mat-form-field>
<input type="text" placeholder="Select IP" matInput [matAutocomplete]="itm" [formControl]="item.IPForm">
<mat-autocomplete autoActiveFirstOption #itm="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onSelectedIP($event.option.value, item)">
<mat-option *ngFor="let option of IPList | async" [value]="option">
{{option.IP}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
You just need to add second auto-complete and so on