Search filter not working on IE 8

Question

I'm using http://codepen.io/anon/pen/gKrln have copy the code and mix it up with my table data. It works on firefox and chrome.

I have change:

 document.getElementsByClassName('light-table-filter2');

TO inputs = $(".light-table-filter");

but im not sure how i would change document.getElementsByClassName(_input.getAttribute('data-table')); to make it work on IE8?

with the changes I have made only work on firefox and chrome , how can I get it to work on IE8?

var LightTableFilter;

LightTableFilter = (function() {
  var _filter, _input, _onInputEvent;
  _input = null;
  _onInputEvent = (function(_this) {
    return function(e) {
      var row, table, tables, tbody, _i, _j, _k, _len, _len1, _len2, _ref, _ref1;
      _input = e.target;

      tables = document.getElementsByClassName(_input.getAttribute('data-table'));
      for (_i = 0, _len = tables.length; _i < _len; _i++) {
        table = tables[_i];
        _ref = table.tBodies;
        for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
          tbody = _ref[_j];
          _ref1 = tbody.rows;
          for (_k = 0, _len2 = _ref1.length; _k < _len2; _k++) {
            row = _ref1[_k];
            _filter(row);
          }
        }
      }
    };
  })(this);
  _filter = function(row) {
    var len, n, text, val, vals, _i, _len;
    text = row.textContent.toLowerCase();
    vals = _input.value.toLowerCase().split(' ');
    len = vals.length;
    n = 0;
    for (_i = 0, _len = vals.length; _i < _len; _i++) {
      val = vals[_i];
      if (text.indexOf(val) !== -1) {
        n++;
      }
    }
    return row.style.display = n === len ? 'table-row' : 'none';
  };
  return {
    init: function() {
      var input, inputs, _i, _len, _results;
      inputs = $(".light-table-filter");

      _results = [];
      for (_i = 0, _len = inputs.length; _i < _len; _i++) {
        input = inputs[_i];
        _results.push(input.oninput = _onInputEvent);
      }
      return _results;
    }
  };
})();

Here is the body :

<section class="container">

    <input type="search" class="light-table-filter" data-table="order-table"  />

    <table  class="order-table"  >
      <thead><th>Name</th><th>Department</th><th>Ext:</th><th>Email</th><th>Title Name</th><th>Cell Phone</th></thead>
    <tbody>
    <cfoutput query="Branch"  >
    <tr>

        <td >#emp_namefirst#  </td> 
    <td >#dept_name#</td>       
        <td >#emp_ext#</div></td>
        <td >#EMP_EMAIL#  </td>

    </tr>
    </cfoutput>
    </tbody>
    </table>

</section>

Answer 1

When you look to support a modern script in a legacy browser, you'll definitely have a few areas in which you'll need to make some adjustments. As you've properly identified, getElementsByClassName is not going to be available in Internet Explorer 8 - you therefore made a wise decision to go with jQuery, which can provide comparable features in legacy environments.

Other things you'll be giving up are Array.prototype.forEach, addEventListener, and textContent. Fortunately, these can all be replaced with jQuery.fn.each, jQuery.fn.on, and jQuery.fn.text respectively. You also don't have access to an input event either until IE9. We'll use the proprietary propertychange event in as a fallback to the input event.

Making these changes, we see a greatly reduced script:

(function () {

    "use strict";

    var LightTableFilter = (function () {

        var _input, _row;

        function _onInputEvent ( event ) {
            _input = $( this );
            $( "tr:gt(0)", "." + _input.attr( "data-table" ) ).each( _filter );
        }

        function _filter () {
            _row = $( this );
            _row.toggle( _row.text().indexOf( _input.val() ) > -1 );
        }

        return {
            init: function () {
                $( ".light-table-filter" ).on( "input propertychange", _onInputEvent );
            }
        };

    })();

    $( LightTableFilter.init );

})();

Be sure that you use a 1.x version of jQuery, as the 2.x branch is intended for Internet Explorer 9 and up. You can test the above script online at: http://jsfiddle.net/md18wvy2/15/.

If the above structure isn't necessary needing to be preserved, you could collapse it down even further to something resembling the following:

(function ( $ ) {

    "use strict";

    // By passing our init function into $, it will be caused when the DOM is ready
    $(function init () {
        // Call our filter function on every input event of any .light-table-filter
        $( ".light-table-filter" ).on( "input propertychange", function filter ( event ) {
            // Find every tr in the corresponding table, and loop over them
            $( "tr", "." + $( this ).attr( "data-table" ) ).each(function toggle () {
                var row = $( this );
                // Show/Hide current tr based on presence of a substring
                row.toggle( row.text().indexOf( event.target.value ) > -1 );
            });
        });
    });

})( jQuery );

You can test this online at http://jsfiddle.net/md18wvy2/14/.

The above approaches both use case-sensitive filtering. If you'd like to make the filtering case-insensitive you would need to follow the original script's direction and normalize the output before checking for substrings:

_row.text().toLowerCase().indexOf( _input.val().toLowerCase() )

Answer 2

var myAttribute = $(_input).attr('data-table');
var myElements = $('.' + myAttribute);

Or simply

var myElements = $('.' + $(_input).attr('data-table'));

Answer 3

If you choose to go down the jQuery route

var className = $(_input).attr('data-table');
tables = $('.' + className);