搜索过滤器不适用于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);