Coding With David

 Back in March, I posted a new Blazor data grid with a search box ( see post ).  Since then I have found a new and improved search box that I wanted to implement.  The search part is implemented the same.  What I added was the ability for the user to narrow down the search by selecting which field they wanted to search on.  This will help the user find what they are looking for and in a large collection, the search will end up being faster. The goal of making the change was to make the search box a new component and have it handle the UI functionality part. Prep Work Here is the prep work I did before adding the search box: Started with the source code from the post listed above. Upgraded the project to .Net 5 Upgraded the Nuget packages that were out of date. Ensured every build and run. Change to a Component I wanted to create a component for the search box so I could use it in other applications.   1. Create a Folder under UIControls called "SearchB...

Use case:   User want to be able to search the records for matching data.   The user does not want to have to learn complex query syntax or a coded language.   They want our search to work like Googles, you just type in words and it finds it for you. Now that we have a usable data grid for our applications, [SimpleGrid] , we will be adding a search box to it.   These are the steps we will need to take to add a search box to our application.     1.        Add the UI        2.        Wire in the On click event     3.        Allow the user to “clear” the search results Before Search View Search Box UI There is nothing really special about our search box HTML:     <div class="row searchactionrow">         <div class="col-md-6">         ...