javascript - Search filter not working on IE 8 -

javascript - Search filter not working on IE 8 -

i'm using http://codepen.io/anon/pen/gkrln have re-create code , mix table data. works on firefox , chrome.

i have change:

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

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

but im not sure how alter document.getelementsbyclassname(_input.getattribute('data-table')); create work on ie8?

with changes have made work on firefox , chrome , how can work on ie8?

var lighttablefilter; lighttablefilter = (function() { var _filter, _input, _oninputevent; _input = null; _oninputevent = (function(_this) { homecoming 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')); (_i = 0, _len = tables.length; _i < _len; _i++) { table = tables[_i]; _ref = table.tbodies; (_j = 0, _len1 = _ref.length; _j < _len1; _j++) { tbody = _ref[_j]; _ref1 = tbody.rows; (_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; (_i = 0, _len = vals.length; _i < _len; _i++) { val = vals[_i]; if (text.indexof(val) !== -1) { n++; } } homecoming row.style.display = n === len ? 'table-row' : 'none'; }; homecoming { init: function() { var input, inputs, _i, _len, _results; inputs = $(".light-table-filter"); _results = []; (_i = 0, _len = inputs.length; _i < _len; _i++) { input = inputs[_i]; _results.push(input.oninput = _oninputevent); } homecoming _results; } }; })();

here 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>

when back upwards modern script in legacy browser, you'll have few areas in you'll need create adjustments. you've identified, getelementsbyclassname not going available in net explorer 8 - hence made wise decision go jquery, can provide comparable features in legacy environments.

other things you'll giving array.prototype.foreach, addeventlistener, , textcontent. fortunately, these can replaced jquery.fn.each, jquery.fn.on, , jquery.fn.text respectively. don't have access input event either until ie9. we'll utilize proprietary propertychange event in fallback input event.

making these changes, see reduced script:

class="lang-js prettyprint-override">(function () { "use strict"; var lighttablefilter = (function () { var _input, _row; function _oninputevent ( event ) { _input = $( ); $( "tr:gt(0)", "." + _input.attr( "data-table" ) ).each( _filter ); } function _filter () { _row = $( ); _row.toggle( _row.text().indexof( _input.val() ) > -1 ); } homecoming { init: function () { $( ".light-table-filter" ).on( "input propertychange", _oninputevent ); } }; })(); $( lighttablefilter.init ); })();

be sure utilize 1.x version of jquery, 2.x branch intended net explorer 9 , up. can test above script online at: http://jsfiddle.net/md18wvy2/15/.

if above construction isn't necessary needing preserved, collapse downwards farther resembling following:

class="lang-js prettyprint-override">(function ( $ ) { "use strict"; // passing our init function $, caused when dom ready $(function init () { // phone call our filter function on every input event of .light-table-filter $( ".light-table-filter" ).on( "input propertychange", function filter ( event ) { // find every tr in corresponding table, , loop on them $( "tr", "." + $( ).attr( "data-table" ) ).each(function toggle () { var row = $( ); // show/hide current tr based on presence of substring row.toggle( row.text().indexof( event.target.value ) > -1 ); }); }); }); })( jquery );

you can test online @ http://jsfiddle.net/md18wvy2/14/.

the above approaches both utilize case-sensitive filtering. if you'd create filtering case-insensitive need follow original script's direction , normalize output before checking substrings:

class="lang-js prettyprint-override">_row.text().tolowercase().indexof( _input.val().tolowercase() )

javascript jquery internet-explorer-8