/
HxSearchBox_Demo.razor
61 lines (53 loc) · 2.09 KB
/
HxSearchBox_Demo.razor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<HxSearchBox DataProvider="ProvideSearchResults"
TItem="SearchBoxItem"
ItemTitleSelector="i => i.Title"
ItemSubtitleSelector="i => i.Subtitle"
ItemIconSelector="i => i.Icon"
Placeholder="Search"
OnItemSelected="OnItemSelected"
OnTextQueryTriggered="OnTextQueryTriggered">
<DefaultContentTemplate>
<div class="p-2 text-muted">Search for Mouse, Table or Door...</div>
</DefaultContentTemplate>
<NotFoundTemplate>
<div class="small py-2 px-3 text-muted"><HxIcon CssClass="me-2" Icon="BootstrapIcon.EmojiFrown"/>Sorry, I did not find that...</div>
</NotFoundTemplate>
</HxSearchBox>
<p class="mt-3">
Last selected item: @selectedItem?.Title<br/>
Last triggered text-query: @triggeredTextQuery<br />
</p>
@code {
private SearchBoxItem selectedItem;
private string triggeredTextQuery;
List<SearchBoxItem> Data { get; set; } = new()
{
new() { Title = "Table", Subtitle = "50 000", Icon = BootstrapIcon.Table },
new() { Title = "Mouse", Subtitle = "400", Icon = BootstrapIcon.Mouse },
new() { Title = "Door", Subtitle = "1000", Icon = BootstrapIcon.DoorClosed },
new() { Title = "Big table", Subtitle = "9 000", Icon = BootstrapIcon.Table },
new() { Title = "Small table", Subtitle = "7 200", Icon = BootstrapIcon.Table }
};
private void OnItemSelected(SearchBoxItem item)
{
selectedItem = item;
}
private void OnTextQueryTriggered(string text)
{
triggeredTextQuery = text;
}
private async Task<SearchBoxDataProviderResult<SearchBoxItem>> ProvideSearchResults(SearchBoxDataProviderRequest request)
{
await Task.Delay(400); // imitate slower server API
return new()
{
Data = Data.Where(i => i.Title.Contains(request.UserInput, StringComparison.OrdinalIgnoreCase))
};
}
internal class SearchBoxItem
{
public string Title { get; set; }
public string Subtitle { get; set; }
public BootstrapIcon Icon { get; set; }
}
}