Issue
Here I got a list of countries in an autocomplete dropdown and tried to filter those by starting letters of the country name.
Example: If we type "Aus", all the country name with "aus" are being filtered. (See screenshot). I want to filter only "Australia and Austria" or any other country names with starting letters "Aus".
How to do that?
<ng-autocomplete #countryList formControlName="locationCountry" [data]="countries"
min-length="1" [searchKeyword]="countrykeyword"
[initialValue]="countrykeyword"
(selected)='selectEventCountry($event);onLocationSubmit();'
(inputCleared)='onCountryCleared($event, false)'
[itemTemplate]="countryListTemplate"
[notFoundTemplate]="notFoundTemplate" placeHolder="Enter Country">
</ng-autocomplete>
Solution
According to Angular AutoComplete Inputs,
Input | Description |
---|---|
customFilter | Custom filter function. You can use it to provide your own filtering function, as e.g. fuzzy-matching filtering, or to disable filtering at all (just pass (items) => items as a filter). Do not change the items argument given, return filtered list instead. |
You can define your custom filter logic and pass it to [customFilter]
@Input property.
SOLUTION
.component.html
<ng-autocomplete #countryList formControlName="locationCountry"
[data]="countries"
min-length="1"
[searchKeyword]="countrykeyword"
[initialValue]="countrykeyword"
(selected)='selectEventCountry($event);onLocationSubmit();'
(inputCleared)='onCountryCleared($event, false)'
[itemTemplate]="countryListTemplate"
[notFoundTemplate]="notFoundTemplate"
placeholder="Enter Country"
[customFilter]="customFilter">
</ng-autocomplete>
.component.ts
export class AppComponent {
...
customFilter = function(countries: any[], query: string): any[] {
return countries.filter(x => x.name.toLowerCase().startsWith(query.toLowerCase()));
};
}
Answered By - Yong Shun
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.