Fossil SCM

update the documentation in quickfilter.js

jkosche 2025-05-25 13:38 quickfilter
Commit 81b4fd259b6238380cefc6016ef47f02e3bd9f4b9b5ad6ed40fa685922f61d7c
1 file changed +9 -1
--- src/quickfilter.js
+++ src/quickfilter.js
@@ -1,9 +1,17 @@
11
/* Javascript code that will enable quick filtering of items in tables.
22
**
33
** Add an input field with the id 'quickfilter' as follows:
4
-** <input type="text" id="quickfilter" placeholder="filter list...">
4
+** <input type="search" id="quickfilter" style="display: none"
5
+** placeholder="filter list...">
6
+** The id on the input-field is important for the script. The input type
7
+** can be text or search, with search some browsers add functionality to
8
+** clear the field. The display: none is added to hide it from users that
9
+** haven't enabled Javascript, as the script to make it visible is never
10
+** executed. This is because without Javascript this input-field would be
11
+** functionless.
12
+**
513
** Mark the table with the filter items with the class 'filterable'.
614
** The table is expected to have a tbody around the rows that are
715
** filtered (to avoid filtering the header).
816
**
917
** The user can type to filter the table for elements matching the typed text.
1018
--- src/quickfilter.js
+++ src/quickfilter.js
@@ -1,9 +1,17 @@
1 /* Javascript code that will enable quick filtering of items in tables.
2 **
3 ** Add an input field with the id 'quickfilter' as follows:
4 ** <input type="text" id="quickfilter" placeholder="filter list...">
 
 
 
 
 
 
 
 
5 ** Mark the table with the filter items with the class 'filterable'.
6 ** The table is expected to have a tbody around the rows that are
7 ** filtered (to avoid filtering the header).
8 **
9 ** The user can type to filter the table for elements matching the typed text.
10
--- src/quickfilter.js
+++ src/quickfilter.js
@@ -1,9 +1,17 @@
1 /* Javascript code that will enable quick filtering of items in tables.
2 **
3 ** Add an input field with the id 'quickfilter' as follows:
4 ** <input type="search" id="quickfilter" style="display: none"
5 ** placeholder="filter list...">
6 ** The id on the input-field is important for the script. The input type
7 ** can be text or search, with search some browsers add functionality to
8 ** clear the field. The display: none is added to hide it from users that
9 ** haven't enabled Javascript, as the script to make it visible is never
10 ** executed. This is because without Javascript this input-field would be
11 ** functionless.
12 **
13 ** Mark the table with the filter items with the class 'filterable'.
14 ** The table is expected to have a tbody around the rows that are
15 ** filtered (to avoid filtering the header).
16 **
17 ** The user can type to filter the table for elements matching the typed text.
18

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button