**SearchBox** A search box (SearchBox) provides an input field for searching content within a site or app to find specific items.
**Basic**:
**Prefix & Suffix**:
**Binding**:
GetSuggestedItems() =>
[
"Apple",
"Red Apple",
"Blue Apple",
"Green Apple",
"Banana",
"Orange",
"Grape",
"Broccoli",
"Carrot",
"Lettuce"
];
private List GetLongSuggestedItems() =>
[
"Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple",
"Red Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple",
"Blue Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple",
"Green Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple Apple",
"Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana Banana",
"Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange",
"Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape Grape",
"Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli Broccoli",
"Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot Carrot",
"Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce Lettuce"
];
private Func SearchFunc = (string searchText, string itemText) =>
{
if (string.IsNullOrEmpty(searchText) || string.IsNullOrEmpty(itemText)) return false;
return itemText.StartsWith(searchText, StringComparison.OrdinalIgnoreCase);
};
private async ValueTask> LoadItems(BitSearchBoxSuggestItemsProviderRequest request)
{
try
{
var query = new Dictionary()
{
{ "$top", request.Take < 1 ? 5 : request.Take },
};
if (string.IsNullOrEmpty(request.SearchTerm) is false)
{
query.Add("$filter", $"contains(toupper(Name),'{request.SearchTerm.ToUpper()}')");
}
var url = NavManager.GetUriWithQueryParameters("api/Products/GetProducts", query);
var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultProductDto, request.CancellationToken);
return data!.Items!.Select(i => i.Name)!;
}
catch
{
return [];
}
}
**Validation**:
public class ValidationSearchBoxModel
{
[StringLength(6, MinimumLength = 2, ErrorMessage = "Text must be between 2 and 6 chars.")]
public string Text { get; set; }
}
private ValidationSearchBoxModel validationBoxModel = new();
**Color**:
Search Value: @onChangeSearchValue
Search Value: @onSearchValue
private string twoWaySearchValue;
private string onChangeSearchValue;
private string onSearchValue;
**Suggestion (AutoComplete)**:
SearchValue: @searchValue
SearchValue: @searchValueWithSuggestFilterFunction
SearchValue: @searchValueWithMinSearchLength
SearchValue: @searchValueWithMaxSuggestedItems
SearchValue: @searchValueWithSearchDelay
SearchValue: @searchValueWithItemsProvider