JSFiddle - React, Tailwind, and code Playground

by Ford Heacock

HTML

<script src="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css">
<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<select class="w300" multiple="multiple" id="dropdown1">
        <optgroup label="Anderson County">
            <option value="1">Anderson County (District)</option>
            <option value="2">Alamo City</option>
            <option value="3">Alcoa City</option>
        </optgroup>
        <optgroup label="Bedford County">
            <option value="4">Bedford County</option>
            <option value="5">Henderson</option>
            <option value="6">Billy Crystal</option>
        </optgroup>
        <optgroup label="Benton County">
            <option value="7">Option 7</option>
            <option value="8">Option 8</option>
            <option value="9">Option 9</option>
        </optgroup>
    </select>
    
    <title>Testing Multi-Table Search Filter2</title>Search All Tables
<input type="text" id="Search_All">
<br>
<br>
<div id="dt_example">
    <div id="div1" style="overflow: auto;"> <b>Current</b>:
        <br>
        <table class='display' id='table1'>
            <thead>
                <tr>
                    <th>Fname</th>
                    <th>Lname</th>
                    <th>Age</th>
                    <th>Check</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Smith</td>
                    <td>44</td>
                    <td>--</td>
                </tr>
                <tr>
                    <td>Mary</td>
                    <td>Doe</td>
                    <td>54</td>
                    <td>--</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="div-mid-spacer">&nbsp;</div>
    <div id="div2"> <b>Last</b>:
   ...

CSS

.w300 {
    width: 300px;
}

JavaScript

//multi-select
$(function () {
	$('select').multipleSelect();
});

           $.fn.dataTableExt.oApi.fnFilterAll = function (oSettings, sInput, iColumn, bRegex, bSmart) {
               var settings = $.fn.dataTableSettings;

               for (var i = 0; i < settings.length; i++) {
                   settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart);
               }
           };

           $(document).ready(function () {
               $('#table1').dataTable({
                   "bPaginate": false,

               });
               var oTable0 = $("#table1").dataTable();

               $("#Search_All").keyup(function () {
                   // Filter on the column (the index) of this element
                   oTable0.fnFilterAll(this.value);
               });
           });

           $(document).ready(function () {
               $('#table2').dataTable({
                   "bPaginate": false,

               });
               var oTable1 = $("#table1").dataTable();

               $("#Search_All").keyup(function () {
                   // Filter on the column (the index) of this element
                   oTable1.fnFilterAll(this.value);
               });
           });