JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://datatables.net/release-datatables/media/css/demo_table.css">
Filter: 
<select id="filter_col_1" name="filter_col_1">
    <option value="">Select</option>
    <option value="A&B">A&B</option>
    <option value="C!">C!</option>
    <option value="D?">D?</option>
</select>
<br />
<br />
<br />
<table id="results" cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
    <thead>
        <tr>
            <th>Col #1</th>
            <th>Col #2</th>
            <th>Col #3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A&B</td>
            <td>Name 1</td>
            <td>01/02/2003</td>
        </tr>
        <tr>
            <td>C!</td>
            <td>Name 2</td>
            <td>04/05/2006</td>
        </tr>
        <tr>
            <td>D?</td>
            <td>Name 3</td>
            <td>07/08/2009</td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function() {
    
    $('#results').dataTable();


    $("#filter_col_1").change( function() { 
        $('#results').dataTable().fnFilter(
            '\\b' + htmlEntities($("#filter_col_1").val()) + '\\b',
            0,
            true,
            false
        );
    } );  

});

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;')
                      .replace(/</g, '&lt;')
                      .replace(/>/g, '&gt;')
                      .replace(/"/g, '&quot;')
                      .replace(/!/g, '&#33;');
}