add: counter of total or filtered while typing

functions.js

@@ -33,9 +33,11 @@ function applyfilter() {
     if (oFilter) {
         var q = document.getElementById('filter').value;
         var aQ = q.split(" ");
+        var iElements = document.getElementsByClassName('idp').length;
 
+        var iShown=0;
         // reduce boxes based on filter using AND condition
-        for (var i = 0; i < document.getElementsByClassName('idp').length; i++) {
+        for (var i = 0; i < iElements; i++) {
             var idp = document.getElementsByClassName('idp')[i];
 
             var bShow = true;
@@ -48,7 +50,7 @@ function applyfilter() {
                 }
             }
             idp.className = bShow ? 'idp' : 'idp hide';
-            document.getElementById('resetfilter').style.display = (q > "") ? 'inline' : 'none';
+            iShown += bShow ? 1 : 0;
         }
 
         var aBtns = document.getElementsByClassName('filterbutton');
@@ -56,7 +58,7 @@ function applyfilter() {
             var bMarked = false;
             for (var iPart = 0; iPart < aQ.length; iPart++) {
                 var qPart = aQ[iPart];
-                var id2search = 'filterbtn-dot-' + qPart.replace(/^./, '');
+                var id2search = 'filterbtn-dot-' + qPart.replace(/^#/, '');
                 var qPart = aQ[iPart];
                 if (aBtns[i].id == id2search) {
                     bMarked = true;
@@ -66,6 +68,16 @@ function applyfilter() {
             aBtns[i].className = bMarked ? 'filterbutton active' : 'filterbutton';
         }
 
+        var sCounter=(iShown<iElements)
+            ? (
+                iShown==0
+                    ? t('filter-none')
+                    : t('filter-visible') + ': <strong>' + iShown+'</strong> / '+iElements
+            )
+            : t('filter-total') +': <strong>'+ iElements + '</strong>';
+        
+        document.getElementById('filterCounter').innerHTML = sCounter;
+        document.getElementById('resetfilter').style.visibility = (q > '' ? '' : 'hidden');
         document.getElementById('filter').focus();
         localStorage.setItem(sLsvar, q);
     };
@@ -99,13 +111,13 @@ function showFilterBox() {
             q = '';
         }
 
-        oFilter.style.display = 'block';
-
-        oFilter.innerHTML = ''
-            // + t('filter-idps-label') + '<br>'
-            + '<input type="text" id="filter" placeholder="'+t('filter-idps-placeholder')+'" onchange="applyfilter()" onkeydown="applyfilter()" onkeyup="applyfilter()" value=""/>'
-            + '<a href="#" id="resetfilter" onclick="resetFilter(); return false;" title="'+t('resetfilter-title')+'"> X </a><br>'
-            ;
+        // oFilter.innerHTML = ''
+        //     // + t('filter-idps-label') + '<br>'MAXRECORDS
+        //     + '<input type="text" id="filter" placeholder="'+t('filter-idps-placeholder')+'" onchange="applyfilter()" onkeydown="applyfilter()" onkeyup="applyfilter()" value=""/>'
+        //     + '<a href="#" id="resetfilter" onclick="resetFilter(); return false;" title="'+t('resetfilter-title')+'"> X </a>'
+        //     + '<span id="filterCounter"></span>'
+        //     +'<br>'
+        //     ;
         setFilter(q);
 
         for (var i = 0; i < document.getElementsByClassName('idp').length; i++) {