MediaWiki:CustomFiltered.js

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

    var $bar = $('<div>', {
      id: 'smw-filter-bar',
      css: { marginBottom: '10px', display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }
    });

    var $searchInput = $('<input>', {
      type: 'text',
      id: 'smw-search-input',
      placeholder: 'Search all columns…',
      css: { padding: '5px 10px', fontSize: '14px', border: '1px solid #ccc', borderRadius: '4px', minWidth: '250px' }
    });

    var $counter = $('<span>', {
      id: 'smw-filter-counter',
      css: { fontSize: '14px', color: '#555' }
    });

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

    function snapshotSMW() {
      $container.find('tr.filtered-table-item').each(function () {
        $(this).data('smw-hidden', $(this).css('display') === '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');
    }

    // Disconnect observer while applySearch runs so our own
    // display changes don't trigger a false SMW snapshot
    var observer = new MutationObserver(function () {
      observer.disconnect();
      snapshotSMW();
      applySearch();
      observer.observe($container[0], observerConfig);
    });

    var observerConfig = {
      subtree: true,
      attributes: true,
      attributeFilter: ['style']
    };

    observer.observe($container[0], observerConfig);

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

    snapshotSMW();
    applySearch();
  }

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

}(jQuery));