title: Using select2 with datatables to filter on multple values
body: <p>Im currently trying to filter each column of my datatable using a select2 dropdown.</p>
  
  <p>My code currently filters correctly without the multiple tag on the select tag, but once I add the multiple value to my select tag I get the following error:</p>
  
  <pre><code>TypeError: a.replace is not a function
  </code></pre>
  
  <p>I have been trying to adapt the following datatables javascript:
  <a href="https://datatables.net/examples/api/multi_filter_select.html" rel="nofollow noreferrer">link</a></p>
  
  <p>Here is what I have currently:</p>
  
  <pre><code>$('#caseTable').DataTable( {
              initComplete: function () {
                  var x = 0;
                  this.api().columns().every( function () {
                      var column = this;
                      var select = $('&lt;select class="search2" multiple="multiple"&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;')
                          .appendTo( $('.dropdown'+x)) 
                          .on( 'change', function () { 
                              var val = $.fn.dataTable.util.escapeRegex(
                                  $(this).val()
                              );
  
                              column
                                  .search( val ? '^'+val+'$' : '', true, false ) //find this value in this column, if it matches, draw it into the table.
                                  .draw();
                          } );
  
                      column.data().unique().sort().each( function ( d, j ) {
                          select.append( '&lt;option id="'+d+'"value="'+d+'"&gt;'+d+'&lt;/option&gt;' )
                      } );
  
                      x++   
                  } );
                  $(".search2").select2();
  
              }
  } );
  </code></pre>
  
  <p>EDIT: I managed to fix it. I needed to store the multiple values into an array, and then pipe the values together to search for each individual value.
  Here are the changes I made to the .on('change') function.</p>
  
  <pre><code>.on( 'change', function () { //when an option is selected
          var val = new Array();
          //set val to current element in the dropdown.
          val = $(this).val();
  
          if (val.length &gt; 1){
  
            valString = val.toString();
            valPiped =  valString.replace(/,/g,"|")
  
               column
                 .search( valPiped ? '^'+valPiped+'$' : '', true, false ) //find this value in this column, if it matches, draw it into the table.
                 .draw();
           } else if (val.length == 1) {
               column
                  .search( val ? '^'+val+'$' : '', true, false ) //find this value in this column, if it matches, draw it into the table.
                   .draw();
           } else {
               column
                  .search('',true,false)
                  .draw();
           }
  } );
  </code></pre>