umogen-ng/src/Nyanlabs.Umogen.Server/Shared/Autocomplete.razor
2023-11-18 15:11:36 +01:00

51 lines
1.3 KiB
Text

<div class="relat" @onfocusin="(() => focus = true)">
<input type="text" class="form-control" @oninput="Prechange" value="@Value">
@if (focus)
{
<div class="autocomplete-items">
@foreach (var tup in Filter())
{
<div @onclick="async (e) => await Select(tup.Item2)">
@tup.Item1 (@tup.Item2)
</div>
}
</div>
}
</div>
@code {
private bool focus = false;
[Parameter]
public IEnumerable<(string, string)> AcceptedValues { get; set; } = [];
[Parameter]
public string Value { get; set; } = "";
private async Task Prechange(ChangeEventArgs e)
{
Value = (string)e.Value!;
StateHasChanged();
await Change.InvokeAsync(e);
}
[Parameter]
public EventCallback<ChangeEventArgs> Change { get; set; }
private async Task Select(string s)
{
focus = false;
Value = s;
await Prechange(new()
{
Value = s
});
StateHasChanged();
}
private IEnumerable<(string, string)> Filter()
{
return AcceptedValues.Where(v => v.Item1.StartsWith(Value, StringComparison.OrdinalIgnoreCase) ||
v.Item2.StartsWith(Value, StringComparison.OrdinalIgnoreCase));
}
}