Scenario: A textbox is present with a list of data below it. Upon typing in the textbox, the list gets filtered based on the text entered.
Code:
Pipe:
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform {
transform(xxxs: IXxx[], searchInput: string): IXxx[] {
if (!xxxs) {
return [];
}
if (!searchInput) {
return xxxs;
}
searchInput = searchInput.toLowerCase();
return xxxs.filter(xxx => {
let firstName = xxx.employee.firstName.toLowerCase();
let lastName = xxx.employee.lastName.toLowerCase();
return firstName.includes(searchInput) &&
firstName.startsWith(searchInput[0]) ||
lastName.includes(searchInput) &&
lastName.startsWith(searchInput[0]);
});
}
}
Html:
<input type="text" placeholder="search person"
[(ngModel)]="searchText" />
...
<section * ngFor="let shift of shifts | search: searchText; let last = last">
...
</section>
<div * ngIf="searchText && (shifts | search: searchText).length === 0" class="no-content">
No Shifts</div>
This piece of code functions smoothly across most browsers except for IE and Edge.
Though polyfills for includes and startsWith have been added, an error still persists.
Error:
https://i.stack.imgur.com/hJWVC.png
Update #1:
Upon inspecting, the value of searchText appears in the console as expected. However, when using the debugger, the error mentioned earlier does not arise. Quite puzzling.