如何在页面重载时保持表格筛选关键词的激活状态

我有一款轻量的表格筛选JS脚本，之前添加了将筛选值存入localStorage并在页面重载时回填的功能，但回填后筛选不会自动激活。需要修改脚本，让页面重载后输入框有值时自动执行筛选，只显示匹配结果。

现有相关代码 #

原js.table.filter脚本 #

(function(document) {
  'use strict';

  var TableFilter = (function(Arr) {

    var _input;

    function _onInputEvent(e) {
      _input = e.target;
      var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
      Arr.forEach.call(tables, function(table) {
        Arr.forEach.call(table.tBodies, function(tbody) {
          Arr.forEach.call(tbody.rows, _filter);
        });
      });
    }

    function _filter(row) {
      var text = row.textContent.toLowerCase(),
        val = _input.value.toLowerCase();
      row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
    }

    return {
      init: function() {
        var inputs = document.getElementsByClassName('light-table-filter');
        Arr.forEach.call(inputs, function(input) {
          input.oninput = _onInputEvent;
        });
      }
    };
  })(Array.prototype);

  document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
      TableFilter.init();
    }
  });

})(document);

原存储与回填值的脚本 #

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("filter").onkeyup = store;
    document.getElementById("filter").onload = getValue();
});


//store value after changes
function store(){
    var text = document.getElementById("filter").value;
    localStorage.setItem("filter",text);
}
//local storage to keep values after refresh
function getValue(){
    var storedText = localStorage.getItem("filter");
//    alert(storedText);
    if(storedText != null){
        document.getElementById("filter").value = storedText; 
    }
    else
        document.getElementById("filter").value = null;
}

HTML代码 #

<p>
  <input id="filter" type="search" class="light-table-filter" data-table="sub-table" placeholder="filter">
</p>

<table class="sub-table">
</table>

修改后的代码 #

修改后的js.table.filter脚本 #

我们给TableFilter添加一个可手动调用的筛选触发方法，这样就能在回填值后主动执行筛选：

(function(document) {
  'use strict';

  var TableFilter = (function(Arr) {

    var _input;

    function _onInputEvent(e) {
      _input = e.target;
      _applyFilter(_input);
    }

    // 提取筛选逻辑为独立方法，方便复用
    function _applyFilter(input) {
      _input = input;
      var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
      Arr.forEach.call(tables, function(table) {
        Arr.forEach.call(table.tBodies, function(tbody) {
          Arr.forEach.call(tbody.rows, _filter);
        });
      });
    }

    function _filter(row) {
      var text = row.textContent.toLowerCase(),
        val = _input.value.toLowerCase();
      row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
    }

    return {
      init: function() {
        var inputs = document.getElementsByClassName('light-table-filter');
        Arr.forEach.call(inputs, function(input) {
          input.oninput = _onInputEvent;
        });
      },
      // 新增公共方法，用于手动触发筛选
      triggerFilter: function(inputElement) {
        if (inputElement && inputElement.value.trim()) {
          _applyFilter(inputElement);
        }
      }
    };
  })(Array.prototype);

  document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
      TableFilter.init();
    }
  });

  // 暴露全局变量，方便外部调用
  window.TableFilter = TableFilter;

})(document);

修改后的存储与回填值的脚本 #

修正input元素没有onload事件的问题，并在回填值后调用新增的筛选触发方法：

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("filter").onkeyup = store;
    // 直接调用getValue，不需要绑定onload（input没有这个事件）
    getValue();
});

//store value after changes
function store(){
    var text = document.getElementById("filter").value;
    localStorage.setItem("filter",text);
}

//local storage to keep values after refresh
function getValue(){
    var storedText = localStorage.getItem("filter");
    var filterInput = document.getElementById("filter");
    
    if(storedText != null){
        filterInput.value = storedText; 
        // 回填后触发筛选
        if (window.TableFilter) {
            TableFilter.triggerFilter(filterInput);
        }
    } else {
        filterInput.value = '';
    }
}

修改说明 #

1. 提取筛选逻辑：把原来_onInputEvent里的筛选代码抽成_applyFilter方法，让它可以接收输入框元素参数，方便复用。
2. 新增公共方法：给TableFilter添加triggerFilter方法，外部可以传入输入框元素，主动触发筛选，并且只有当输入框有值时才执行。
3. 暴露全局变量：把TableFilter挂载到window上，这样外部脚本能调用它的方法。
4. 修正事件绑定问题：input元素没有onload事件，直接在DOMContentLoaded里调用getValue即可。
5. 回填后触发筛选：在getValue函数里，当成功回填存储的值后，调用TableFilter.triggerFilter方法执行筛选。

内容的提问来源于stack exchange，提问作者Override