Bootstrap table filter control selects matching subset

Question

I'm using bootstrap-table and bootstrap-table-filter to filter results in a table, however the "select" filter is matching subsets of strings which match the filter. E.g., if I select (not search) for "oat", I get matches in the column for "goatherd" as well as for "oat". It's obviously doing some kind of string search rather than matching whole values. Is there a way to change this behaviour?

Example html:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></head>

      <table id="table" data-url="json/data1.json" class="dataframe" data-filter-control="true" data-show-search-clear-button="true" data-show-filter-control-switch="true">
      <thead>
        <tr style="text-align: right;">
          <th data-field="oats_goats" data-filter-control="select">Porridge or milk</th>
        </tr>
      </thead>
      <tbody>[Insert data]</tbody>
    </table>
    
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"</script>
<script src="https://unpkg.com/bootstrap-table@1.20.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.20.1/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

<script>
  $(function() {
    $('#table').bootstrapTable()
  })
</script>

Answer 1

Try using the column option filterStrictSearch.

https://bootstrap-table.com/docs/extensions/filter-control/#filterstrictsearch

<th data-field="oats_goats" data-filter-control="select" data-filter-strict-search="true">Porridge or milk</th>