refactor(autcomplete): simplify sample; add exact match logic #3585

src/app/autocomplete/autocomplete.sample.ts

@@ -3,39 +3,18 @@ import { FormBuilder, FormControl, Validators, FormGroup } from '@angular/forms'
 import { worldInfo, attractions } from './data';
 import { IgxDialogComponent } from 'igniteui-angular';
 
-@Pipe({ name: 'contains' })
-export class AutocompletePipeContains implements PipeTransform {
-
-    public transform = (items: any[], term = '') => this.filterItems(items, term);
-
-    protected filterItems = (items: any[], term: string) =>
-        items.filter((item) =>
-            (item.name ? item.name : item).toString().toLowerCase().indexOf(term.toString().toLowerCase()) > -1)
-}
-
-@Pipe({ name: 'groupContains' })
-export class AutocompleteGroupPipeContains extends AutocompletePipeContains implements PipeTransform {
-
-    public transform = (continents: any[], term = '') => this.filterContinents(continents, term);
-
-    private filterContinents = (countries: any[], term = '') =>
-        countries.filter((continent) => this.filterItems(continent.countries, term).length > 0)
-}
 @Component({
     selector: 'app-autocomplete-sample',
     styleUrls: ['autocomplete.sample.css'],
-    templateUrl: `autocomplete.sample.html`,
-    providers: [AutocompletePipeContains, AutocompleteGroupPipeContains]
+    templateUrl: `autocomplete.sample.html`
 })
 export class AutocompleteSampleComponent {
     @ViewChild('alert', { read: IgxDialogComponent }) public alert: IgxDialogComponent;
     public travel: FormGroup;
     worldInfo;
     attractions;
 
-    constructor(fb: FormBuilder,
-        public containsPipe: AutocompletePipeContains,
-        public containsGroupPipe: AutocompleteGroupPipeContains) {
+    constructor(fb: FormBuilder) {
         this.worldInfo = worldInfo;
         this.attractions = attractions;
 
@@ -46,8 +25,8 @@ export class AutocompleteSampleComponent {
     }
 
     onSearch() {
-        if (this.containsGroupPipe.transform(this.worldInfo, this.travel.value.country).length > 0 &&
-            this.containsPipe.transform(this.attractions, this.travel.value.attraction).length > 0) {
+        if (filterGroupContains(this.worldInfo, this.travel.value.country, true).length > 0 &&
+            filterContains(this.attractions, this.travel.value.attraction, true).length > 0) {
             this.alert.message = 'You can visit ' + (100 + Math.floor(Math.random() * 100)) + ' ' + this.travel.value.attraction +
                 ' in ' + this.travel.value.country + '.';
         } else {
@@ -56,3 +35,25 @@ export class AutocompleteSampleComponent {
         this.alert.open();
     }
 }
+
+@Pipe({ name: 'contains' })
+export class AutocompletePipeContains implements PipeTransform {
+    public transform = (items: any[], term = '') => filterContains(items, term);
+}
+
+@Pipe({ name: 'groupContains' })
+export class AutocompleteGroupPipeContains implements PipeTransform {
+    public transform = (continents: any[], term = '') => filterGroupContains(continents, term);
+}
+
+const filterContains = (items: any[], term: string, exactMatch = false): any[] => {
+    return items.filter((item) => {
+        const itm = (item.name ? item.name : item).toString().toLowerCase();
+        const trm = term.toString().toLowerCase();
+        return exactMatch ? itm === trm : itm.indexOf(trm) > -1;
+    });
+};
+
+const filterGroupContains = (groupItems: any[], term = '', exactMatch = false): any[] => {
+    return groupItems.filter((groupItem) => filterContains(groupItem.countries, term, exactMatch).length > 0);
+};