Fossil SCM
no more need to display the quickfilter based on elements, as it is now explicitly activated
Commit
32d86c59ab1d73ed7bcd87a40b0f9587cdd58daffc40de018a310b5672cb513a
Parent
a1d904a9633e061…
1 file changed
+5
-15
+5
-15
| --- src/quickfilter.js | ||
| +++ src/quickfilter.js | ||
| @@ -1,29 +1,19 @@ | ||
| 1 | 1 | /* Javascript code that will enable quick filtering of items in tables. |
| 2 | -** | |
| 2 | +** | |
| 3 | 3 | ** Add an input field with the id 'quickfilter' as follows: |
| 4 | -** <input type="text" id="quickfilter" placeholder="filter list..." | |
| 5 | -** style="display: none"> | |
| 4 | +** <input type="text" id="quickfilter" placeholder="filter list..."> | |
| 6 | 5 | ** Mark the table with the filter items with the class 'filterlist'. |
| 7 | 6 | ** The table is expected to have a tbody around the rows that are |
| 8 | 7 | ** filtered (to avoid filtering the header). |
| 9 | 8 | ** |
| 10 | -** The input field is hidden at standard ('display:none'), but the script | |
| 11 | -** will display it, if the list contains more than five elements. | |
| 12 | -** | |
| 13 | -** If shown the user can type to filter the table for elements matching | |
| 14 | -** the typed text. | |
| 9 | +** The user can type to filter the table for elements matching the typed text. | |
| 15 | 10 | */ |
| 16 | 11 | |
| 17 | -const quickfilter = document.getElementById('quickfilter'); | |
| 18 | -const filterlist = document.querySelectorAll('.filterlist tbody tr'); | |
| 19 | - | |
| 20 | -document.addEventListener('DOMContentLoaded', function(){ | |
| 21 | - if (filterlist.length > 5) quickfilter.style.display = ''; | |
| 22 | -}); | |
| 23 | - | |
| 24 | 12 | quickfilter.addEventListener('input', function (){ |
| 13 | + const quickfilter = document.getElementById('quickfilter'); | |
| 14 | + const filterlist = document.querySelectorAll('.filterlist tbody tr'); | |
| 25 | 15 | const filter = quickfilter.value.toLowerCase().trim(); |
| 26 | 16 | filterlist.forEach(function(row){ |
| 27 | 17 | const rowText = row.textContent.toLowerCase().trim(); |
| 28 | 18 | row.style.display = rowText.includes(filter) ? 'table-row' : 'none'; |
| 29 | 19 | }); |
| 30 | 20 |
| --- src/quickfilter.js | |
| +++ src/quickfilter.js | |
| @@ -1,29 +1,19 @@ | |
| 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 | ** style="display: none"> |
| 6 | ** Mark the table with the filter items with the class 'filterlist'. |
| 7 | ** The table is expected to have a tbody around the rows that are |
| 8 | ** filtered (to avoid filtering the header). |
| 9 | ** |
| 10 | ** The input field is hidden at standard ('display:none'), but the script |
| 11 | ** will display it, if the list contains more than five elements. |
| 12 | ** |
| 13 | ** If shown the user can type to filter the table for elements matching |
| 14 | ** the typed text. |
| 15 | */ |
| 16 | |
| 17 | const quickfilter = document.getElementById('quickfilter'); |
| 18 | const filterlist = document.querySelectorAll('.filterlist tbody tr'); |
| 19 | |
| 20 | document.addEventListener('DOMContentLoaded', function(){ |
| 21 | if (filterlist.length > 5) quickfilter.style.display = ''; |
| 22 | }); |
| 23 | |
| 24 | quickfilter.addEventListener('input', function (){ |
| 25 | const filter = quickfilter.value.toLowerCase().trim(); |
| 26 | filterlist.forEach(function(row){ |
| 27 | const rowText = row.textContent.toLowerCase().trim(); |
| 28 | row.style.display = rowText.includes(filter) ? 'table-row' : 'none'; |
| 29 | }); |
| 30 |
| --- src/quickfilter.js | |
| +++ src/quickfilter.js | |
| @@ -1,29 +1,19 @@ | |
| 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 'filterlist'. |
| 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 | */ |
| 11 | |
| 12 | quickfilter.addEventListener('input', function (){ |
| 13 | const quickfilter = document.getElementById('quickfilter'); |
| 14 | const filterlist = document.querySelectorAll('.filterlist tbody tr'); |
| 15 | const filter = quickfilter.value.toLowerCase().trim(); |
| 16 | filterlist.forEach(function(row){ |
| 17 | const rowText = row.textContent.toLowerCase().trim(); |
| 18 | row.style.display = rowText.includes(filter) ? 'table-row' : 'none'; |
| 19 | }); |
| 20 |