Search text:
The Blazor Search Box component can be used to introduce ad-hoc search capabilities in your next DevExpress-powered Blazor app.
Use the Text property to specify a search text string or to bind the component to a data source object. To respond to text changes, handle the TextChanged event. You can also use the @bind attribute (@bind-Text) to implement two-way binding as requirements dictate.
Our Blazor Search Box component supports different size modes. To specify the component size in code, use the SizeMode property. To apply different size modes in this demo, use the drop-down list in the demo card's header.
| Product | Country | City | Address |
|---|---|---|---|
|
|
|
|
|
| Queso Cabrales | France | Reims | 59 rue de l'Abbaye |
| Singaporean Hokkien Fried Mee | France | Reims | 59 rue de l'Abbaye |
| Mozzarella di Giovanni | France | Reims | 59 rue de l'Abbaye |
| Tofu | Germany | Münster | Luisenstr. 48 |
| Manjimup Dried Apples | Germany | Münster | Luisenstr. 48 |
| Jack's New England Clam Chowder | Brazil | Rio de Janeiro | Rua do Paço, 67 |
| Manjimup Dried Apples | Brazil | Rio de Janeiro | Rua do Paço, 67 |
| Louisiana Fiery Hot Pepper Sauce | Brazil | Rio de Janeiro | Rua do Paço, 67 |
| Gustaf's Knäckebröd | France | Lyon | 2, rue du Commerce |
| Ravioli Angelo | France | Lyon | 2, rue du Commerce |
| Louisiana Fiery Hot Pepper Sauce | France | Lyon | 2, rue du Commerce |
| Sir Rodney's Marmalade | Belgium | Charleroi | Boulevard Tirou, 255 |
| Geitost | Belgium | Charleroi | Boulevard Tirou, 255 |
| Camembert Pierrot | Belgium | Charleroi | Boulevard Tirou, 255 |
| Gorgonzola Telino | Brazil | Rio de Janeiro | Rua do Paço, 67 |
| Chartreuse verte | Brazil | Rio de Janeiro | Rua do Paço, 67 |
| Maxilaku | Brazil | Rio de Janeiro | Rua do Paço, 67 |
| Guaraná Fantástica | Switzerland | Bern | Hauptstr. 29 |
| Pâté chinois | Switzerland | Bern | Hauptstr. 29 |
| Longlife Tofu | Switzerland | Bern | Hauptstr. 29 |
|
|
|
|
|
The DevExpress Blazor Search Box component updates its associated Text property after a user modifies search text. Use the BindValueMode property to specify when updates should occur. The following modes are available to you:
OnLostFocus(default) — The editor’s value is updated after the editor loses focus.OnInput— The editor’s value is updated whenever a user enters text.OnDelayedInput— The editor’s value is updated (with a delay) once a user modifies values.
| Product | Country | City | Address |
|---|---|---|---|
|
|
|
|
|
| Queso Cabrales | France | Reims | 59 rue de l'Abbaye |
| Singaporean Hokkien Fried Mee | France | Reims | 59 rue de l'Abbaye |
| Mozzarella di Giovanni | France | Reims | 59 rue de l'Abbaye |
| Tofu | Germany | Münster | Luisenstr. 48 |
| Manjimup Dried Apples | Germany | Münster | Luisenstr. 48 |
| Jack's New England Clam Chowder | Brazil | Rio de Janeiro | Rua do Paço, 67 |
| Manjimup Dried Apples | Brazil | Rio de Janeiro | Rua do Paço, 67 |
| Louisiana Fiery Hot Pepper Sauce | Brazil | Rio de Janeiro | Rua do Paço, 67 |
| Gustaf's Knäckebröd | France | Lyon | 2, rue du Commerce |
| Ravioli Angelo | France | Lyon | 2, rue du Commerce |
| Louisiana Fiery Hot Pepper Sauce | France | Lyon | 2, rue du Commerce |
| Sir Rodney's Marmalade | Belgium | Charleroi | Boulevard Tirou, 255 |
| Geitost | Belgium | Charleroi | Boulevard Tirou, 255 |
| Camembert Pierrot | Belgium | Charleroi | Boulevard Tirou, 255 |
| Gorgonzola Telino | Brazil | Rio de Janeiro | Rua do Paço, 67 |
| Chartreuse verte | Brazil | Rio de Janeiro | Rua do Paço, 67 |
| Maxilaku | Brazil | Rio de Janeiro | Rua do Paço, 67 |
| Guaraná Fantástica | Switzerland | Bern | Hauptstr. 29 |
| Pâté chinois | Switzerland | Bern | Hauptstr. 29 |
| Longlife Tofu | Switzerland | Bern | Hauptstr. 29 |
|
|
|
|
|
In this demo, our Blazor Search Box component is used alongside a Submit button to simulate a common search/filtering-related UI metaphor.
You can incorporate the DevExpress Blazor Search Box component within the Blazor Toolbar component.
Search text:
Set the ClearButtonDisplayMode property to Auto to display the Clear button within the Search Box when not empty.
Use the NullText property to display placeholder text in the Search Box when empty.