Home > database >  Blazor text input call method each time when new character is changed without pressing enter
Blazor text input call method each time when new character is changed without pressing enter

Time:12-14

I am building a Blazor Maui app using Mudblazor and I would like to perform a search each time when the input is changed. I have the following:

<MudTextField T="string" @bind-Value="@Search" Label="Standard" Variant="Variant.Text"></MudTextField>

@code{
 public string Search
        {
            get
            {
                return _search;
            }
            set
            {
                _search = value;
                try
                {
                    var t = Task.Run(() => PerformSearch());
                    t.Wait();
                    StateHasChanged();
                }
                catch { }
            }
        }
}
   

This works if I type and press enter, I would like without the pressing.

CodePudding user response:

From the MudBlazor docs you can achieve your desired behavior by setting some attributes on the component and handling the OnDebounceIntervalElapsed event (you can play with the DebounceInterval to get the behavior you'd like):

<MudTextField T="string" 
              @bind-Value="@Search" 
              Label="Standard" 
              Variant="Variant.Text"
              Immediate="true"
              DebounceInterval="100"
              OnDebounceIntervalElapsed="DoSearch">
</MudTextField>

@code {
    public string Search { get; set; }

    private async Task DoSearch(string text)
    {
        // use the text parameter as needed here
        await Task.Run(() => PerformSearch());
    }
}
  • Related