MediaWiki:CustomFiltered.js

(function ($) {
  function init() {
    var $container = $('.filtered-views-container');
    if (!$container.length) return;

    var $bar = $('<div>', {
      id: 'smw-filter-bar',
      class: 'd-flex justify-content-between align-items-center w-100 mb-2'
    });

    var $searchInput = $('<input>', {
      type: 'text',
      id: 'smw-search-input',
      placeholder: 'Search all columns…',
      class: 'form-control w-auto'
    });

    var $counter = $('<span>', {
      id: 'smw-filter-counter',
      class: 'text-muted'
    });

    $bar.append($searchInput, $counter);
    $container.before($bar);

    function snapshotSMW() {
      $container.find('tr.filtered-table-item').each(function () {
        var inlineDisplay = this.style.display;
        $(this).data('smw-hidden', inlineDisplay === 'none');
      });
    }

    function applySearch() {
      var term = $.trim($searchInput.val()).toLowerCase();
      var total = 0;
      var visible = 0;

      $container.find('tr.filtered-table-item').each(function () {
        var $row = $(this);
        total++;

        if ($row.data('smw-hidden')) {
          $row.hide();
          return;
        }

        if (!term || $row.text().toLowerCase().indexOf(term) !== -1) {
          $row.show();
          visible++;
        } else {
          $row.hide();
        }
      });

      $counter.text('Showing ' + visible + ' of ' + total + ' entries');
    }

    var smwTimer = null;

    var observer = new MutationObserver(function (mutations) {
      var smwMutation = mutations.some(function (m) {
        return $(m.target).hasClass('filtered-table-item');
      });

      if (!smwMutation) return;

      clearTimeout(smwTimer);
      smwTimer = setTimeout(function () {
        snapshotSMW();
        applySearch();
      }, 50);
    });

    observer.observe($container[0], {
      subtree: true,
      attributes: true,
      attributeFilter: ['style']
    });

    $searchInput.on('input keyup', function () {
      applySearch();
    });

    snapshotSMW();
    applySearch();
  }

  $(document).ready(function () {
    init();
  });

}(jQuery));