Filterable
This extension creates search boxes that allow to instantly filter tables and lists. See examples below.
Contents
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 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 * Chrome * Chromium * curl * Dillo * Edge * MSIE * Konqueror * Lynx * Midori * Netscape * Opera * real men browse with `telnet` * Safari * SeaMonkey * wget | Web browsers:
|
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, filter multiple lists
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":) 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 |
Modern browsers in 2025:
For older computers:
Used in scripting:
Not maintained:
|
Above the selector ".browsers ul" defined in the filterbox will find the 4 unordered lists ("ul") within the container with the class name "browsers"
Filter a nested list like a tree
The custom filterbox allows to also filter a nested list with sub-lists. Only the items that match the search terms, and their parent elements, will be shown.
Click to toggle example
(:input filterbox data-selector=".worldtree ul" data-minsize=1 placeholder="Filter tree":) * Africa ** Algeria ** Angola ** Benin ** Botswana ** Burkina Faso ** Burundi ** Cape Verde ** Cameroon ** Central African Republic ** Chad ** Comoros ** Republic of Congo ** Djibouti ** Egypt ** Equatorial Guinea ** Eritrea ** Eswatini ** Ethiopia ** Gabon ** Gambia ** Ghana ** Guinea ** Guinea-Bissau ** Ivory Coast ** Kenya ** Lesotho ** Liberia ** Libya ** Madagascar ** Malawi ** Mali ** Mauritania ** Mauritius ** Morocco ** Mozambique ** Namibia ** Niger ** Nigeria ** Rwanda ** Sao Tome and Principe ** Senegal ** Seychelles ** Sierra Leone ** Somalia ** South Africa ** South Sudan ** Sudan ** Tanzania ** Togo ** Tunisia ** Uganda ** Zambia ** Zimbabwe ** Territories of Africa: *** Canary Islands '-(Spain)-' *** Ceuta '-(Spain)-' *** French Southern and Antarctic Lands '-(France)-' *** Madeira '-(Portugal)-' *** Mayotte '-(France)-' *** Melilla '-(Spain)-' *** Pelagie Islands '-(Italy)-' *** Plazas de Soberania '-(Spain)-' *** Reunion '-(France)-' *** Saint Helena, Ascension and Tristan da Cunha '-(UK)-' *** Socotra Archipelago '-(Yemen)-' * Asia ** Afghanistan ** Armenia ** Azerbaijan ** Bahrain ** Bangladesh ** Bhutan ** British Indian Ocean ** Brunei ** Cambodia ** China ** Cyprus ** Egypt ** Georgia ** Hong Kong ** India ** Indonesia ** Iran ** Iraq ** Israel ** Japan ** Jordan ** Kazakhstan ** Kuwait ** Kyrgyzstan ** Laos ** Lebanon ** Macau ** Malaysia ** Maldives ** Mongolia ** Myanmar ** Nepal ** North Korea ** Oman ** Pakistan ** Palestine ** Philippines ** Qatar ** Russia ** Saudi Arabia ** Singapore ** South Korea ** Sri Lanka ** Syria ** Taiwan ** Tajikistan ** Thailand ** Timor Leste ** Turkey ** Turkmenistan ** United Arab Emirates ** Uzbekistan ** Vietnam ** Yemen * Europe ** European Union *** Austria *** Belgium *** Bulgaria *** Croatia *** Cyprus *** Czechia *** Denmark *** Estonia *** Finland *** France *** Germany *** Greece *** Hungary *** Ireland *** Italy *** Latvia *** Lithuania *** Luxembourg *** Malta *** Netherlands *** Poland *** Portugal *** Romania *** Slovakia *** Slovenia *** Spain *** Sweden ** UK *** Great Britain *** Northern Ireland ** Albania ** Andorra ** Armenia ** Azerbaijan ** Belarus ** Bosnia & Herzegovina ** Georgia ** Great Britain ** Iceland ** Kazakhstan ** Liechtenstein ** Moldova ** Monaco ** Montenegro ** North Macedonia ** Norway ** Russia ** San Marino ** Serbia ** Switzerland ** Turkey ** Ukraine ** Vatican ** Territories of Europe *** Channel Islands '-(UK)-' *** Gibraltar '- (UK)-' *** Guernsey '-(UK - crown dependency)-' *** Isle of Man '- (UK - crown dependency)-' *** Jersey '- (UK - crown dependency)-' *** Kosovo '- (partially recognized, claimed by Serbia)-' *** Northern Cyprus '- (not recognized, claimed by Turkey)-' *** Northern Ireland '- (UK)-' *** Svalbard '- (Norway)-' * North America ** Antigua & Barbuda ** Bahamas ** Barbados ** Belize ** Canada ** Costa Rica ** Cuba ** Dominica ** Dominican Republic ** El Salvador ** Grenada ** Guatemala ** Haiti ** Honduras ** Jamaica ** Mexico ** Nicaragua ** Panama ** Puerto Rico ** Saint Kitts & Nevis ** Saint Lucia ** Saint Vincent & Grenadines ** Trinidad & Tobago ** USA ** Territories of North America *** Anguilla '-(UK)-' *** Aruba '-(Netherlands)-' *** Bermuda '-(UK)-' *** Bonaire (Netherlands) *** British Virgin Islands '-(UK)-' *** Cayman Islands '-(UK)-' *** Clipperton Island '-(France)-' *** Curaçao '-(Netherlands)-' *** Greenland '-(Denmark)-' *** Guadeloupe '-(France)-' *** Martinique '-(France)-' *** Montserrat '-(UK)-' *** Navassa Island '-(USA)-' *** Saba '-(Netherlands)-' *** Saint Barthélemy '-(France)-' *** Saint Martin '-(France)-' *** Saint Pierre and Miquelon '-(France)-' *** Sint Eustatius '-(Netherlands)-' *** Sint Maarten '-(Netherlands)-' *** Turks and Caicos '-(UK)-' *** US Virgin Islands '-(USA)-' * South America ** Argentina ** Bolivia ** Brazil ** Chile ** Colombia ** Ecuador ** Guyana ** Paraguay ** Peru ** Suriname ** Uruguay ** Venezuela ** Territories of South America: *** Bouvet Island '-(Norway)-' *** Falkland Islands '- (UK)-' *** French Guinea '- (France)-' *** Nueva Esparta '- (Venezuela)-' *** South Georgia and the South Sandwich Islands '- (UK)-' * Oceania ** Australia ** Fiji ** Kiribati ** Marshall Islands ** Micronesia ** Nauru ** New Zealand ** Palau ** Papa New Guinea ** Solomon Islands ** Samoa ** Tonga ** Tuvalu ** Vanuatu * Antarctica ** Adelie Land '-France-' ** Argentine Antarctica ** Australian Antarctic Territory ** British Antarctic Territory ** Chilean Antarctic Territory ** Peter I Island ** Queen Maud Land ** Ross Dependency |
|
Notes
To do / some day / maybe
For nested lists, matching a parent element should maybe reveal all children of this element.
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
- Cookbook /
- FoxCSV Display csv tables automatically or via templates; filtering, sorting, editing csv data. (beta)
- TextExtract search, grep, and extract text from other pages or groups with search terms and regular expressions, using search form or markup expression. (stable)
Contributors
PmWiki extension written and maintained by Petko. Jets.js library by Denis Lukov.
Comments
See discussion at Filterable-Talk
User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.