Displaying, Looping, Searching, and Filtering Data Chapter 2The next step is to use the input query box when the active user option is not selected. We
also want our query to be a fuzzy search — for example, to match words containing the
search query rather than matching exactly. We also want it to be case insensitive:
filterRow(person) {
let result = true;if(this.filterField) {if(this.filterField === 'isActive') {
result = this.filterUserState === person.isActive;
} else {
let query = this.filterQuery.toLowerCase(),
field = person[this.filterField].toString().toLowerCase();
result = field.includes(query);
}}return result;
}There are a few things we had to add to this method in order to work. The first step is to
check that our select field has a value to begin the filtering. As the first option in our select
field has a value="", this equates to false. If this is the case, the method returns the
default of true.
If it does have a value, it then goes to our original if statement. This checks on the specific
value to see whether it matches isActive – if it does, it runs the code we wrote previously.
If not, we start our alternate filtering. A new variable of query is established, which takes
the value of the input and converts it to lowercase.
The second variable is the data we are going to be filtering against. This uses the value of
the select box, which is the field key on the person, to extract the value to filter with. This
value is converted to a string (in the case of the date or balance), converted to lowercase
and stored as the field variable. Lastly, we then use the includes function to check
whether the field includes the query entered. If it does, we return true and the row is
shown if; not, the row is hidden.
The next issue we can address is when filtering with numbers. It is not intuitive for the user
to enter the exact balance of the user they are after — a much more natural way of
searching is to find users with a balance under or over a certain amount, for example, <