Mark functions matching the filter

_includes/bin_table.html

@@ -34,17 +34,37 @@
      // filter rows
      var noResults = true;
      document.querySelectorAll('#bin-table tbody tr').forEach(function (row) {
-         var binName = row.children[0].firstElementChild.innerText.toLowerCase();
+         var show = true;
-         var functions = Array.from(row.children[1].firstElementChild.children)
-                              .map(function (x) { return x.innerText })
-                              .join('\x00').toLowerCase(); // separator
 
-         var show = (
+         var binName = row.children[0].firstElementChild.innerText.toLowerCase();
-             binName.indexOf(binPattern) !== -1 &&
+         if (binName.indexOf(binPattern) === -1) {
-             functionPatterns.every(function (pattern) {
+             show = false;
-                 return functions.indexOf(pattern) !== -1;
+         }
-             })
+
-         );
+         if (show) {
+             var functionElems = Array.from(row.children[1].firstElementChild.children);
+             functionElems.forEach((item) => {
+                 item.className = '';
+             });
+             functionPatterns.forEach((pattern) => {
+                 // skip empty filters
+                 if (!pattern) {
+                     return;
+                 }
+                 // check against the pattern
+                 var noMatches = true;
+                 functionElems.forEach((item) => {
+                     if (item.innerText.toLowerCase().indexOf(pattern) !== -1) {
+                         item.className = 'match';
+                         noMatches = false;
+                     }
+                 });
+                 // no function satisfies the pattern
+                 if (noMatches) {
+                     show = false;
+                 }
+             });
+         }
 
          if (show) {
              row.style.display = '';

assets/style.scss

@@ -3,6 +3,7 @@
 
 $accent: #bf0707;
 $lighter: #fff4f4;
+$marked: #ffcccc;
 $hover: #ff0000;
 
 // layout
@@ -143,6 +144,10 @@ h2, h3, h4, h5, h5 {
             color: $hover;
             border-color: $hover;
         }
+
+        &.match a {
+            background: $marked;
+        }
     }
 }