I have a Blazor application and implemented a filter feature on my bootstrap table similar to the following link: https://timheuer.com/blog/filtering-data-table-with-blazor/
This works fine and exactly how the link explains it. However, I would like to add an extra step into the code which allows me to enter multiple things into the filter and it filter on all these items. For example: Warm 22 and it filters on the summary column and Temp(F). So if you enter multiple strings in this filter it looks at each string and finds anything related to that in any column?
<div class="form-group">
<input class="form-control" type="text" placeholder="Filter..."
@bind="Filter"
@bind:event="oninput">
</div>
<table class="table table-striped">
...
</table>
public bool IsVisible(WeatherForecast forecast)
{
if (string.IsNullOrEmpty(Filter))
return true;
if (forecast.Summary.Contains(Filter, StringComparison.OrdinalIgnoreCase))
return true;
if (forecast.TemperatureC.ToString().StartsWith(Filter) || forecast.TemperatureF.ToString().StartsWith(Filter))
return true;
return false;
}
<table class="table table-striped">
<thead class="thead-light">
<tr>
<th scope="col">Date</th>
<th scope="col">Temp. (C)</th>
<th scope="col">Temp. (F)</th>
<th scope="col">Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
if (!IsVisible(forecast))
continue;
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
Currently my IsVisible() method looks at specific columns rather than checking all columns. I tried to put the text entered into the input in an array and loop through this but couldnt get it working and dont think its the best way.