Fossil SCM
quickfilter also highlights the found matches
Commit
cd31dea4729a5f8134ca5586c5b279bab3f6705631d6ec69451046c016b1baea
Parent
ec93da33b58f49d…
1 file changed
+27
-5
+27
-5
| --- src/quickfilter.js | ||
| +++ src/quickfilter.js | ||
| @@ -7,14 +7,36 @@ | ||
| 7 | 7 | ** filtered (to avoid filtering the header). |
| 8 | 8 | ** |
| 9 | 9 | ** The user can type to filter the table for elements matching the typed text. |
| 10 | 10 | */ |
| 11 | 11 | |
| 12 | -quickfilter.addEventListener('input', function (){ | |
| 12 | +quickfilter.addEventListener('input', function(){ | |
| 13 | 13 | const quickfilter = document.getElementById('quickfilter'); |
| 14 | 14 | const filterlist = document.querySelectorAll('.filterlist tbody tr'); |
| 15 | 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 | - }); | |
| 16 | + for(row of filterlist){ | |
| 17 | + const orig = row.innerHTML; | |
| 18 | + const cleaned = orig.replaceAll("<mark>", "").replaceAll("</mark>", ""); | |
| 19 | + if(filter===''){ | |
| 20 | + row.innerHTML = cleaned; | |
| 21 | + row.style.display = 'table-row'; | |
| 22 | + continue; | |
| 23 | + } | |
| 24 | + let ind = cleaned.toLowerCase().lastIndexOf(filter); | |
| 25 | + if(ind<0){ | |
| 26 | + row.innerHTML = cleaned; | |
| 27 | + row.style.display = 'none'; | |
| 28 | + } | |
| 29 | + let marked = cleaned; | |
| 30 | + do{ | |
| 31 | + if(cleaned.lastIndexOf('<',ind-1)<cleaned.lastIndexOf('>',ind-1)){ | |
| 32 | + // not inside a tag | |
| 33 | + marked = marked.substring(0,ind)+'<mark>'+ | |
| 34 | + marked.substring(ind, ind+filter.length)+'</mark>'+ | |
| 35 | + marked.substring(ind+filter.length); | |
| 36 | + } | |
| 37 | + ind = cleaned.toLowerCase().lastIndexOf(filter,ind-1); | |
| 38 | + }while(ind>=0); | |
| 39 | + row.style.display = (marked===cleaned) ? 'none' : 'table-row'; | |
| 40 | + row.innerHTML = marked; | |
| 41 | + }; | |
| 20 | 42 | }); |
| 21 | 43 |
| --- src/quickfilter.js | |
| +++ src/quickfilter.js | |
| @@ -7,14 +7,36 @@ | |
| 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 | }); |
| 21 |
| --- src/quickfilter.js | |
| +++ src/quickfilter.js | |
| @@ -7,14 +7,36 @@ | |
| 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 | for(row of filterlist){ |
| 17 | const orig = row.innerHTML; |
| 18 | const cleaned = orig.replaceAll("<mark>", "").replaceAll("</mark>", ""); |
| 19 | if(filter===''){ |
| 20 | row.innerHTML = cleaned; |
| 21 | row.style.display = 'table-row'; |
| 22 | continue; |
| 23 | } |
| 24 | let ind = cleaned.toLowerCase().lastIndexOf(filter); |
| 25 | if(ind<0){ |
| 26 | row.innerHTML = cleaned; |
| 27 | row.style.display = 'none'; |
| 28 | } |
| 29 | let marked = cleaned; |
| 30 | do{ |
| 31 | if(cleaned.lastIndexOf('<',ind-1)<cleaned.lastIndexOf('>',ind-1)){ |
| 32 | // not inside a tag |
| 33 | marked = marked.substring(0,ind)+'<mark>'+ |
| 34 | marked.substring(ind, ind+filter.length)+'</mark>'+ |
| 35 | marked.substring(ind+filter.length); |
| 36 | } |
| 37 | ind = cleaned.toLowerCase().lastIndexOf(filter,ind-1); |
| 38 | }while(ind>=0); |
| 39 | row.style.display = (marked===cleaned) ? 'none' : 'table-row'; |
| 40 | row.innerHTML = marked; |
| 41 | }; |
| 42 | }); |
| 43 |