Enhancement: ignore diacritics, support multiple substring matching for UI filtering (#13021)

src-ui/src/app/components/common/input/select/select.component.html

@@ -28,6 +28,7 @@
           [notFoundText]="notFoundText"
           [multiple]="multiple"
           [bindLabel]="bindLabel"
+          [searchFn]="searchFn"
           bindValue="id"
           [virtualScroll]="items?.length > 100"
           (change)="onChange(value)"

src-ui/src/app/components/common/input/select/select.component.spec.ts

@@ -112,6 +112,15 @@ describe('SelectComponent', () => {
     expect(createNewVal).toEqual('baz')
   })
 
+  it('should search items by independent normalized terms', () => {
+    expect(
+      component.searchFn('tax 26', { id: 11, name: 'Tax\u00e9s 2026' })
+    ).toBeTruthy()
+    expect(
+      component.searchFn('tax receipt', { id: 11, name: 'Tax\u00e9s 2026' })
+    ).toBeFalsy()
+  })
+
   it('should clear search term on blur after delay', fakeAsync(() => {
     const clearSpy = jest.spyOn(component, 'clearLastSearchTerm')
     component.onBlur()

src-ui/src/app/components/common/input/select/select.component.ts

@@ -13,6 +13,7 @@ import {
 import { RouterModule } from '@angular/router'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { matchesSearchText } from 'src/app/utils/text-search'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -99,6 +100,9 @@ export class SelectComponent extends AbstractInputComponent<number> {
   @Input()
   bindLabel: string = 'name'
 
+  public searchFn = (term: string, item: any): boolean =>
+    matchesSearchText(item?.[this.bindLabel], term)
+
   @Input()
   showFilter: boolean = false