Search code examples
angularangular-pipe

Custom filter case sensitive


I've created custom pipe to filter my data from database

There is pipe

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(aliases: any, term: any): any {
    // check if search term is undefined
    if (term === undefined) return aliases;
    // return updated array
    return aliases.filter(function(alias){
      return alias.local_part.includes(term) || alias.domain.includes(term);
    });
  }

}

and there is my search input

<form id="filter">
            <div class="input-group custom-search-form">
                <input type="text" placeholder="Search" class="form-control" [(ngModel)]="term" name="filter">
                <span class="input-group-btn">
          <button class="btn btn-primary" type="button">
          <i class="fa fa-search"></i>
                </button>
                </span>
            </div>
        </form>

it works fine but I have in my database records like aaa,Abb,AbbB,cCc.

And when I am typing something into search input it return only elements where is lower cases or upper.

For example: search -> aaa return aaa but not AaA and Aaa

How should I change it to achieve it?


Solution

  • Change your pipe as given below

    private transform(aliases: any, term: any): any {
            let filter;
            let newValue;
            // check if search term is undefined
            if (term === undefined) {
                return aliases;
            } else if (term) {
                filter = term.toLocaleLowerCase();
            }
    
            if (filter && aliases) {
                newValue = aliases.filter((alias) => alias.local_part.toLocaleLowerCase().indexOf(filter) !== -1 || alias.domain.toLocaleLowerCase().indexOf(filter) !== -1);
            } else {
                newValue = aliases;
            }
            // return updated array
            return newValue;
        }