title: DataTables filters column when clicking on input field inside Header
body: <p>I have a DataTables instance that appends a select in the header of a table. <a href="https://codepen.io/abolfazl-the-sans/pen/OJjQxON" rel="nofollow noreferrer">Here</a> is a codepen showing it.</p>
  <p>Here is the relevant part of code that adds the select to the header</p>
  <pre><code>        initComplete: function () {
              count = 0;
              this.api().columns().every(function () {
                  var title = this.header();
                  //replace spaces with dashes
                  title = $(title).html().replace(/[\W]/g, '-');
                  var column = this;
                  var select = $('&lt;br&gt;&lt;select id=&quot;' + title + '&quot; class=&quot;select2&quot; &gt;&lt;/select&gt;')
                      .appendTo($(column.header()))
                      .on('change', function () {
                          //Get the &quot;text&quot; property from each selected data
                          //regex escape the value and store in array
                          var data = $.map($(this).select2('data'), function (value, key) {
                              return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null;
                          });
  
                          //if no data selected use &quot;&quot;
                          if (data.length === 0) {
                              data = [&quot;&quot;];
                          }
  
                          //join array into string with regex or (|)
                          var val = data.join('|');
  
                          //search for the option(s) selected
                          column
                              .search(val ? val : '', true, false)
                              .draw();
                      });
                  //unique, tipo group by 
                  //sorte deixa em ordem abcd
                  column.data().unique().sort().each(function (d, j) {
                      select.append('&lt;option value=&quot;' + d + '&quot;&gt;' + d + '&lt;/option&gt;');
                  });
  
                  //use column title as selector and placeholder
                  $('#' + title).select2({
                      multiple: true,
                      closeOnSelect: false,
                      placeholder: &quot;Select a &quot; + title
                  });
  
                  //initially clear select otherwise first option is selected
                  $('.select2').val(null).trigger('change');
              });
          }
  </code></pre>
  <p>However I noticed that one downside of putting it in the header, is that when I click into the select, DataTables thinks I am sorting by that column. Is there a way to not sort the column if I am clicking inside the select (which has ID equal to the column name)</p>
  <p>Edit: I am looking for a solution that does not trigger the the column sort when I click on an <code>input</code> element inside the header column.</p>