angular data source filter-CodePudding

I have a list of objects being rendered to a table , you can see the sample the screenshot. I am trying to filter data based on the #searchTransactionUserInput placeholder="" (keyup)="applyFilter($event)"

You can see the data being returned from the sample screenshot which is table data source. The current issue is when I search for keyword "ron" it is returning other data that did not match the key , for example if the keyword is "ro" it should only return the user Ronnie js Renil but current it is also returning "user two"

What seem to be the issue with my current filter algo ? Any idea guys ? Thanks.

The priority of the filter or search is filter by fullName.

#table data source

table data source

#UI

SAMPLE UI

#html code

 <div class="search" fxLayoutAlign="start" fxFill >
        <mat-form-field appearance="standard" fxFill>
            <mat-label style="font-size: 12px;">Filter users by name, company or title</mat-label>
            <input matInput #searchTransactionUserInput placeholder="" (keyup)="applyFilter($event)">
            <button mat-button *ngIf="searchTransactionUserInput" matSuffix mat-icon-button aria-label="Clear"
                (click)="clearSearch()">
                <mat-icon>close</mat-icon>
            </button>
        </mat-form-field>
    </div>

#tscode

 applyFilter(filterValue: any) {
    const data = filterValue.target.value;
    filterValue = data.trim(); // Remove whitespace
    filterValue = data.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = data;

  }

  clearSearch(): void {
    this.searchTransactionUserInput.nativeElement.value = '';
    this.dataSource.filter = null;
    this._transactionUserPageEvent();
  }

CodePudding user response：

Try this. This is my working code:

<div *ngIf="isSearch" class="search-box-container">
<mat-form-field class="search-box-form-field">
  <mat-label>Search by Keyword</mat-label>
  <input #search matInput type="text" (keyup)="onSearchKeyUp(search)">
  <button mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="onClearClicked(search)">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

onSearchKeyUp(search: { value: any; }) {
var currentFilter = search.value;
this.dataSource.filter = currentFilter;

if (this.dataSource.paginator) {
  this.dataSource.paginator.firstPage();
}

onClearClicked(search: { value: string; }) {
this.dataSource.filter = "";
search.value = "";

if (this.dataSource.paginator) {
  this.dataSource.paginator.firstPage();
}