• View
• Edit
• History
• Attach
• Print
• Backlinks

Filterable

This extension creates search boxes that allow to instantly filter tables and lists. See examples below.

Installation

This extension requires ExtensionHub.

Place Filterable-2024-08-06.zip in the pmwiki/extensions directory on your server. Optionally you can unzip it.

Alternatively, you can clone the Git repo into pmwiki/extensions with such a command line:
git clone --depth=1 https://github.com/5ko/Filterable.git

Configuration

To enable the extension, navigate to SiteAdmin.ExtensionHub, locate the "Filterable" row and press "Edit". On the new page, check the checkbox "Enable configuration" and near the bottom press "Save".

Only lists and tables with the "filterable" class name, AND with 5 rows/items or more, become filterable.

In the same configuration form, you can change the minimum number of rows or items, and the query selector for the filterable elements.

For example, instead of the default, to process unordered lists with "searchable" class name, and all tables regardless of their class name, that are above the number of items/rows, you can type in the "Query selectors" input field:

  ul.searchable, table

To make filterable the lists on RecentChanges pages (without a %list filterable% wikistyle), in the Hub table on the Filterable row in the drop-down select "New configuration" and press "Edit". In the new page, check "Enable configuration", in the field "Applies to pages" type "*RecentChanges*", and in the "Query selectors" field type "#wikitext ul", then press "Save".

Internationalization

Translations will be included and ship with the recipe, when I find the time to implement it.

The following strings can be translated in an XLPage, for example in French:

  'Filter table' => 'Filtrer la table',
  'Filter list' => 'Filtrer la liste',

Usage

Just add the "filterable" class to lists or tables that need to be filtered. A filter box will appear before the table or list, and typing in it will show rows or lines that contain the typed string (case insensitive).

Web browsers:
* Firefox %list filterable%
* Chrome
* Chromium
* curl
* Dillo
* Edge
* MSIE
* Konqueror
* Lynx
* Midori
* Netscape
* Opera
* real men browse with `telnet`
* Safari
* SeaMonkey
* wget

Filterable can be combined with $EnableSortable:

|| class="filterable sortable simpletable"
||!   m||!Geographic zone     ||!Highest point     ||!Country  ||
|| 3700||Arctic               ||Gunnbjørn Fjeld    ||Greenland ||
|| 8848||North Temperate Zone ||Mount Everest      ||Nepal     ||
|| 5790||North Tropical Zone  ||Cayambe            ||Ecuador   ||
|| 6768||South Tropical Zone  ||Huáscarán          ||Peru      ||
|| 6960||South Temperate Zone ||Aconcagua          ||Argentina ||
|| 4892||Antarctic            ||Mount Vinson       ||(none)    ||

For a table, you can specify the columns that should be filtered, with the attribute data-filtercols=0,1 (comma-separated, starting from zero). In this case the other columns will be ignored when filtering.

Filtering only on the second and fourth columns:

|| class="filterable simpletable" data-filtercols=1,3
||!   m||!Geographic zone     ||!Highest point     ||!Country  ||
|| 3700||Arctic               ||Gunnbjørn Fjeld    ||Greenland ||
|| 8848||North Temperate Zone ||Mount Everest      ||Nepal     ||
|| 5790||North Tropical Zone  ||Cayambe            ||Ecuador   ||
|| 6768||South Tropical Zone  ||Huáscarán          ||Peru      ||
|| 6960||South Temperate Zone ||Aconcagua          ||Argentina ||
|| 4892||Antarctic            ||Mount Vinson       ||(none)    ||

Custom filterbox

From version 2024-08-05, it is possible to place a filterbox anywhere in the page, and define the query selector for the lists and tables filtered by that filterbox. So one filterbox could search in multiple lists and tables.

The lists and tables to be filtered SHOULD NOT have the classname "filterable", but a custom classname like "filtergroup1", or there should be another way to define a query selector.

In the page, add a new input filterbox element:

(:input filterbox data-selector=".filtergroup1" data-minsize=3 placeholder="Filter lists":)

Or with positional attributes:

(:input filterbox ".filtergroup1" 3 placeholder="Filter lists":)

Here is an example field that searches in 4 lists:

(:input filterbox ".browsers ul" 1 placeholder="Filter 4 lists":)

>>browsers<<
Modern browsers in {(ftime %Y)}:
* Firefox
* Chrome
* Edge
* Safari
* Opera
* Konqueror
* Midori

For older computers:
* Lynx
* Dillo

Used in scripting:
* curl
* wget

Not maintained:
* MSIE
* Netscape
* OmniWeb
* Mosaic
>><<

Above the selector ".browsers ul" defined in the filterbox will find the 4 unordered lists ("ul") within the container with the class name "browsers"

Notes

To do / some day / maybe

If you have future plans or wishes for this recipe.

Change log / Release notes

• 2024-08-06: Filterbox add size attribute same as the default one.
• 2024-08-05: Add input filterbox markup with custom selector, suggested by Pierre Racine.
• 2024-04-14: Enable filtering for specific columns.
• 2024-03-02 Update for simpler extGetConfig().
• 2024-02-24 Replace wikilib.d with wikiplain.d. Add space between searchbox and table. Add README.
• 2024-02-20 First public release, ready to be tested.

See also

Contributors

PmWiki extension written and maintained by Petko. Jets.js library by Denis Lukov.

Comments

See discussion at Filterable-Talk