File

projects/i-components/src/lib/pipes/autocomplete.pipe.ts

Description

Pipe to filter items in the AutoCompleteBox itemsSource list.

Metadata

Name filter

Methods

Private Static getFunctionToTest
getFunctionToTest(filterMode: string)
Parameters :
Name Type Optional
filterMode string No
Returns : boolean
Private Static getValueToDisplay
getValueToDisplay(item: any, valueMember: string, valueMemberBinding: string)
Parameters :
Name Type Optional
item any No
valueMember string No
valueMemberBinding string No
Returns : any
Public transform
transform(collection: any[], term: string, filterMode: string, valueMember: string, valueMemberBinding: string, customFilter: (search: any,item: any) => void)

Filter out the elements of the given collection.

"StartsWithCaseSensitive", "StartsWithOrdinalCaseSensitive", "Contains", "ContainsOrdinal", "ContainsCaseSensitive", "ContainsOrdinalCaseSensitive", "Equals","EqualsOrdinal", "EqualsCaseSensitive", "EqualsOrdinalCaseSensitive", "Custom", "None"]

Parameters :
Name Type Optional Default value Description
collection any[] No

The collection with the elements to filter

term string No ''

The pattern to apply

filterMode string No

The kind of filter to apply. One of ["StartsWith", "StartsWithOrdinal", "StartsWithCaseSensitive", "StartsWithOrdinalCaseSensitive", "Contains", "ContainsOrdinal", "ContainsCaseSensitive", "ContainsOrdinalCaseSensitive", "Equals","EqualsOrdinal", "EqualsCaseSensitive", "EqualsOrdinalCaseSensitive", "Custom", "None"]

valueMember string No

a string indicating the member of the collection item to test for (collection[0][valueMember] for instance) or null

valueMemberBinding string No

a {link Binding} object used to solve the value of the item to test for or null

customFilter function No

a custom function used when filterMode is "Custom". Items are validated by calling given function.

Returns : any

a collection with the elements matching the given filter.

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Pipe to filter items in the AutoCompleteBox itemsSource list.
 *
 * @export
 * @class AutocompletePipeFilter
 * @implements {PipeTransform}
 */
@Pipe({ name: 'filter' })
export class AutocompletePipeFilter implements PipeTransform {
  private static getFunctionToTest(
    filterMode: string
  ): (
    term: string,
    itemToTest: string,
    item: any,
    customFilter: (search: any, item2: any) => boolean
  ) => boolean {
    switch (filterMode) {
      case 'StartsWith':
      case 'StartsWithOrdinal':
        return (term: string, itemToTest: string, item: any) =>
          itemToTest
            .toString()
            .toLowerCase()
            .startsWith(term.toString().toLowerCase());
      case 'StartsWithCaseSensitive':
      case 'StartsWithOrdinalCaseSensitive':
        return (term: string, itemToTest: string, item: any) =>
          itemToTest.toString().startsWith(term.toString());
      case 'Contains':
      case 'ContainsOrdinal':
        return (term: string, itemToTest: string, item: any) =>
          itemToTest
            .toString()
            .toLowerCase()
            .includes(term.toString().toLowerCase());
      case 'ContainsCaseSensitive':
      case 'ContainsOrdinalCaseSensitive':
        return (term: string, itemToTest: string, item: any) =>
          itemToTest.toString().includes(term.toString());
      case 'Equals':
      case 'EqualsOrdinal':
        return (term: string, itemToTest: string, item: any) =>
          itemToTest.toString().toLowerCase() === term.toString().toLowerCase();
      case 'EqualsCaseSensitive':
      case 'EqualsOrdinalCaseSensitive':
        return (term: string, itemToTest: string, item: any) =>
          itemToTest.toString() === term.toString();
      case 'Custom':
        return (
          term: string,
          itemToTest: string,
          item: any,
          customFilter: (search: any, item2: any) => boolean
        ) => customFilter(term, item);
      case 'None':
      default:
        return (term: string, itemToTest: string, item: any) => true;
    }
  }

  private static getValueToDisplay(
    item: any,
    valueMember: string,
    valueMemberBinding: string
  ): any {
    if (valueMemberBinding) {
      return item[valueMemberBinding];
    } else {
      return valueMember ? item[valueMember] : item;
    }
  }

  /**
   * Filter out the elements of the given collection.
   *
   * @param collection The collection with the elements to filter
   * @param term The pattern to apply
   * @param filterMode The kind of filter to apply. One of ["StartsWith", "StartsWithOrdinal",
   * "StartsWithCaseSensitive", "StartsWithOrdinalCaseSensitive", "Contains", "ContainsOrdinal",
   * "ContainsCaseSensitive", "ContainsOrdinalCaseSensitive", "Equals","EqualsOrdinal",
   * "EqualsCaseSensitive", "EqualsOrdinalCaseSensitive", "Custom", "None"]
   * @param valueMember a string indicating the member of the collection item to test for (collection[0][valueMember] for instance) or null
   * @param valueMemberBinding  a {link Binding} object used to solve the value of the item to test for or null
   * @param customFilter a custom function used when filterMode is "Custom".  Items are validated by calling given function.
   * @returns a collection with the elements matching the given filter.
   */
  public transform(
    collection: any[],
    term = '',
    filterMode: string,
    valueMember: string,
    valueMemberBinding: string,
    customFilter: (search: any, item: any) => boolean
  ) {
    if (collection?.filter && term != null) {
      const functionToTest =
        AutocompletePipeFilter.getFunctionToTest(filterMode);
      return collection.filter((item) => {
        const itemToTest = AutocompletePipeFilter.getValueToDisplay(
          item,
          valueMember,
          valueMemberBinding
        );
        if (!itemToTest && filterMode !== 'Custom') {
          return false;
        }
        return functionToTest(term, itemToTest, item, customFilter);
      });
    }
    return [];
  }
}

result-matching ""

    No results matching ""