matsen-tool-fe/matsen-tool/src/app/_components/search-input/search-input.component.ts

import {Component, Input} from '@angular/core';
import {FormGroup} from "@angular/forms";
import {debounceTime, distinctUntilChanged, Observable, OperatorFunction, switchMap} from "rxjs";
import {filter, map} from "rxjs/operators";

@Component({
  selector: 'app-search-input',
  templateUrl: './search-input.component.html',
  styleUrl: './search-input.component.scss'
})
export class SearchInputComponent {

    @Input() public formId!: string;
    @Input() public formLabelLangKey!: string;
    @Input() public dataField!: string;
    @Input() public documentForm!: FormGroup;
    @Input() public documentFormField!: string;
    @Input() public fetchFunction!: (term: string) => Observable<{ id: any; name: any }[]>;


    protected formatter = (apiData: any) => apiData.name;

    protected searchItem: OperatorFunction<string, readonly {
        id: any;
        name: any
    }[]> = (text$: Observable<string>) =>
        text$.pipe(
            debounceTime(200),
            distinctUntilChanged(),
            filter((term) => term.length >= 2),
            switchMap((term) => this.fetchFunction(term)),
            map((items: {id: any, name: any}[]) => items.slice(0, 10)),
        );

    protected onItemSelect(selectedItem: any): void {
        this.documentForm.get(this.formId)?.setValue(selectedItem.item.id);
    }
}