How to create an Autocomplete list in Angular 7:
Here I am going to show how to get and display an autocomplete list of contents based on the input given by user.
Create a Form with Input and Mat Autocomplete in the .html file:
<form [formGroup]="serviceForm" (ngSubmit)="addService()" data-automation-attribute="form-op-service">
<mat-grid-list cols="12" rowHeight="65px">
<mat-grid-tile [colspan]="9">
<mat-form-field *ngIf="searchType == '1'" class="full-width" appearance="outline">
<mat-label>Service Name</mat-label>
<input
cdk-focus-initial
type="text"
placeholder="Service Name"
matInput
[matAutocomplete]="auto"
formControlName="serviceName"
[(ngModel)]="serviceName"
(input)="getserviceOnSearch()"
data-automation-attribute="text-service-name" />
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="serviceOnSelect($event.option.value)">
<mat-option *ngFor="let service of filteredOptions | async"
[value]="service.serviceName">
{{ service.serviceName }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</mat-grid-tile>
</mat-grid-list>
</Form>
Explanation:
Main code in the input field:
matAutocomplete set as auto.
input: to get the input entered by the user
under mat-option set the filtered option to get the latest list based on the user key.
Once the user enter the key then using ngModel it will be captured in the method getserviceOnSearch(). The functionality of this method is given below in detail.
Add below code into .TS file:
serviceName: string = "";
//This method is used to filter using the user key and return a customized list
searchedText: string = "";
getserviceOnSearch() {
let splitText: any;
if (
this.serviceName &&
//this.searchedText != this.serviceName &&
(this.serviceName.length == 3 ||
this.serviceName.length == 5 ||
this.serviceName.length > 7)
) {
this.searchedText = this.serviceName;
this.http.get<any>('https://api.io/')
.getResource(
"billing-masters/unit-wise-services?searchKey=" + this.serviceName
)
.subscribe(res => {
if (res) {
this.services = res;
this.filteredOptions = this.serviceControl.valueChanges.pipe(
startWith(""),
map(value => this._filter(value))
);
}
});
} else if (this.serviceName.length <= 2) {
this.filteredOptions = new Observable<string[]>();
}
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.services.filter(option =>
option.serviceName.toLowerCase().includes(filterValue)
);
}
The above code is very simple just need to add this method and the list will populate based on the key entered. If you want to populate the complete list during the application start then add the below code in OnInit method to load the complete API response into the list.
ngOnInit() {
this.http.get<any>('https://api.io/')
.getResource(
"billing-masters/unit-wise-services?searchKey=" + this.serviceName=""
)
.subscribe(res => {
if (res) {
this.services = res;
this.filteredOptions.next(this.services.slice());
}
});
} else if (this.serviceName.length <= 2) {
this.filteredOptions = new Observable<string[]>();
}
}
The above code will add the complete response into the list which will show user all the options that are available and once the key is entered it will filter the options and refresh the list based on the key.
