Taiga UI 5.0 is out!

FilterByInput KIT

GitHub

On this page

Pipe for filtering an array by value entered in a textfield

Basic 

    
      
    

      
      
    

  
    
      <form [formGroup]="form">
    <tui-textfield>
        <input
            #input
            formControlName="user"
            tuiInput
        />

        <label tuiLabel>User</label>

        @if (items | tuiFilterByInput; as filtered) {
            @if (input.value) {
                <tui-data-list-wrapper
                    *tuiDropdown
                    [items]="filtered"
                />
            }
        }
    </tui-textfield>
</form>

Custom matcher 

    
      
    

      
      
    

  
    
      <form [formGroup]="form">
    <tui-textfield
        tuiChevron
        [tuiTextfieldCleaner]="false"
    >
        <label tuiLabel>Search by last name</label>

        <input
            formControlName="user"
            tuiComboBox
        />

        <tui-data-list-wrapper
            *tuiDropdown
            [items]="items | tuiFilterByInput: bySurname"
        />
    </tui-textfield>

    <tui-textfield
        tuiChevron
        class="tui-space_top-5"
        [stringify]="stringify"
        [tuiTextfieldCleaner]="false"
    >
        <label tuiLabel>With ids</label>

        <input
            formControlName="user2"
            tuiComboBox
        />

        <tui-data-list-wrapper
            *tuiDropdown
            [itemContent]="stringify | tuiStringifyContent"
            [items]="users | tuiFilterByInput: byId"
        />
    </tui-textfield>
</form>

Multiselect

Luke Skywalker and a long time ago in a galaxy far, far away.. 
    
      
    

      
      
    

  
    
      <tui-textfield
    multi
    tuiChevron
    [tuiTextfieldCleaner]="false"
>
    <label tuiLabel>Star Wars persons</label>

    <input
        placeholder="Ignored text"
        tuiInputChip
        [formControl]="control"
    />

    <tui-input-chip *tuiItem />

    <tui-data-list-wrapper
        *tuiDropdown
        tuiMultiSelectGroup
        [items]="items | tuiFilterByInput"
    />
</tui-textfield>

Async 

    
      
    

      
      
    

  
    
      <form [formGroup]="form">
    <tui-textfield>
        <input
            #input
            formControlName="user"
            tuiInput
        />

        <label tuiLabel>User</label>

        @if (items$ | async | tuiFilterByInput; as filtered) {
            @if (input.value) {
                <tui-data-list-wrapper
                    *tuiDropdown
                    [items]="filtered"
                />
            }
        }
    </tui-textfield>
</form>
GitHub StackBlitz