JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/plug-ins/f3e99a6c02/integration/bootstrap/3/dataTables.bootstrap.js"></script>

<body>


  <div class="container">
  <label>House: </label><select id="houseList" multiple=multiple>
    <option value="">--</option>
      <option
      <option value="Gryffindor">Gryffindor</option>
      <option value="Slytherin">Slytherin</option>
      <option value="Hufflepuff">Hufflepuff</option>
      <option value="Ravenclaw">Ravenclaw</option>
    </select>

    <div id="tableWrapper" class="col-md-8">

      <table id="tester" class="table table-striped table-bordered">
        <thead>
          <th>Index</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>House</th>
        </thead>
        <tbody>
          <tr>
            <td>0</td>
            <td>Fred</td>
            <td>Weasley</td>
            <td>Gryffindor</td>
          </tr>
          <tr>
            <td>1</td>
            <td>George</td>
            <td>Weasley</td>
            <td>Gryffindor</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Harry</td>
            <td>Potter</td>
            <td>Gryffindor</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Tom</td>
            <td>Riddle</td>
            <td>Slytherin</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Albus</td>
            <td>Dumbledore</td>
            <td>Gryffindor</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Ronald</td>
            <td>Weasley</td>
            <td>Gryffindor</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Ginny</td>
            <td>Weasley</td>
            <td>Gryffindor</td>
...

JavaScript

$(document).ready(function() {
  var columnMap = [{
      "bSearchable": false
    }, {
      "bSearchable": true
    }, {
      "bSearchable": true
    }, {
      "bSearchable": true
    },

  ];
  var table = $("#tester").DataTable({

    "searchHighlight": true,

    "pageLength": 10,
    "oLanguage": {
      "sZeroRecords": "No records matching search criteria"
    },
    "aoColumns": columnMap
  });


  $("#tester").show();

//handling the event
  $("#houseList").on("change", function () {
  var regexString="";
   for(var i=0;i<this.selectedOptions.length;i++)
   {
   		
      	regexString+=this.selectedOptions[i].value;
		var last=(i===this.selectedOptions.length-1)
		if(!last)
		regexString+="|"
      
      
   }
         table.columns(3).search(regexString,true, false).draw();
 
    }); //end keyup event


})