En mi código, trato de filtrar elementos de una lista y trato de filtrar ese elemento cuando escribo varias palabras a la vez. En este momento, puedo filtrar el elemento si escribo las palabras en el orden correcto. Por ejemplo; Puedo filtrar el elemento 'red book love' si escribo 'red book' pero también quiero filtrarlo cuando escribo 'red love' . Aquí está mi código, ¿qué debo hacer para lograr lo que quiero?
HTML:
<mat-form-field appearance="outline" fxFlex="100" class="w-100-p pr-8"> <mat-label>Product</mat-label> <input type="text" required matInput [(ngModel)]="product" name="product" (input)="onProductSearchChange($event.target.value)" [matAutocomplete]="autoProductId"> <button mat-button matSuffix mat-icon-button aria-label="Clear" (click)="product = null" type="button"> <mat-icon>block</mat-icon> </button> <mat-autocomplete autoActiveFirstOption #autoProductId="matAutocomplete" [displayWith]="displayProduct.bind(this)" (optionSelected)="filterProduct($event.option.value)"> <mat-option *ngFor="let prm of productList" [value]="prm"> {{prm?.StockIntegrationCode +' '+ prm?.ProductName}} </mat-option> </mat-autocomplete> </mat-form-field>TS:
onProductSearchChange(search: string) { let filterValue = (search as any).toLocaleLowerCase("tr"); if ( this._adminService.products && this._adminService.products.length > 0 ) { this.productList = this._adminService.products.filter( (x) => x.StockIntegrationCode.indexOf(filterValue) >= 0 || (x.ProductName as any) .toLocaleLowerCase("tr") .indexOf(filterValue) >= 0 ); } if (!search) { this.product = null; this.productList = this._adminService.products; } } displayProduct(product: IProduct): string | undefined { return product ? product.StockIntegrationCode + " - " + product.ProductName : ""; }No puedo decir si desea que TODAS las palabras coincidan, o solo UNA de las palabras, así que aquí están ambas soluciones. Tampoco tengo idea de qué es un código de integración de stock, así que asumo que cuenta si hay una coincidencia en el código o en el nombre.
Solo una palabra coincide
onProductSearchChange(search: string) { if (!search) { this.product = null; this.productList = this._adminService.products; return; //Return because the string is empty } let filterValue = search.toLocaleLowerCase('tr'); let values = filterValue.split(' '); if (this._adminService.products && this._adminService.products.length > 0) { this.productList = this._adminService.products.filter((x) => { for (const value of values) { if ( x.StockIntegrationCode.includes(value) || x.ProductName.toLocaleLowerCase('tr').includes(value) ) return true; } return false; }); } }todas las palabras coinciden
onProductSearchChange(search: string) { if (!search) { this.product = null; this.productList = this._adminService.products; return; //Return because the string is empty } let filterValue = search.toLocaleLowerCase('tr'); let values = filterValue.split(' '); if (this._adminService.products && this._adminService.products.length > 0) { this.productList = this._adminService.products.filter((x) => { for (const value of values) { if ( !x.StockIntegrationCode.includes(value) && !x.ProductName.toLocaleLowerCase('tr').includes(value) ) return false; } return true; }); } }Simplemente dividí el filterValue en espacios en blanco y busqué palabra por palabra.