CODEWITHSUNDEEP
javascriptangulartypescriptsearch
Varnika Gautam
Varnika Gautam

Reputation: 15

How to make search case insensitive in Angular

I have a list of data names and I want to search through it. It should give result irrespective of the case.

this is what I have:

public groups = [{ name: '"Grx-1"', selected: false }, { name: '"Grx-man-2"', selected: false }, { name: '"Grx-up-3"', selected: false }];

queryGroups(groupName) {
        this.groups = this.totalGroupsList.filter((group) => {
            if (group.userId.includes(groupName) || group.dps.includes(groupName) || group.sourceType.includes(groupName)) {
                return true;
            } else {
                let isRole = false;
                group.role.forEach((role) => {
                    if (role.name.includes(groupName)) {
                        isRole = true;
                        return;
                    }
                });
                if (isRole === false) {
                    return false;
                } else {
                    return true;
                }
            }
        });
    }

If I search for "Grx" I get all the results. I want that if I search for "grx" i should get all the results.

Upvotes: 0

Views: 1351

Answers (2)

Onur Özkır
Onur Özkır

Reputation: 555

You must use more than one search method :

  queryGroups(groupName: string) {
    this.groups = this.totalGroupsList.filter((group) => {
      let isExist = this.searchFunc(groupName, group.userId)
        || this.searchFunc(groupName, group.dps)
        || this.searchFunc(groupName, group.sourceType)
      if (isExist) {
        return true;
      } else {
        let isRole = false;
        group.role.forEach((role) => {
          if (this.searchFunc(groupName, role.name)) {
            isRole = true;
            break;
          }
        });
        return isRole !== false;
      }
    });
  }

  private searchFunc(searchKey, searchTarget): boolean {
   if(!searchKey) {
      return false;
    }
    return (searchTarget.toLocaleUpperCase().includes(searchKey.toLocaleUpperCase())) ||
      (searchTarget.toUpperCase().includes(searchKey.toUpperCase())) ||
      (searchTarget.includes(searchKey.toLocaleUpperCase())) ||
      (searchTarget.includes(searchKey.toUpperCase())) ||
      (searchTarget.toLocaleUpperCase().includes(searchKey)) ||
      (searchTarget.toUpperCase().includes(searchKey)) ||
      (searchTarget.includes(searchKey))
  }

Upvotes: 0

Chris
Chris

Reputation: 2397

You can use toLowerCase()

role.name.toLowerCase().includes(groupName.toLowerCase())

Upvotes: 1

Related Questions