added makeshift filter function

Author: SirkoS

.code/templates/index.mustache

@@ -10,6 +10,9 @@
   <header>
     <h1>I-ADOPT Variable Examples</h1>
     <p>Your resource for modelled I-ADOPT variables with concepts from different terminologies.</p>
+
+    <input type="text" placeholder="Filter Variables ..." id="filter" autocomplete="off" />
+    <script src="./script.js"></script>
   </header>
 
   <main>

.code/templates/script.js

@@ -0,0 +1,39 @@
+(function(){
+
+  // schedule update of filter
+  let filterTimer = null;
+  document.querySelector( '#filter' )
+   ?.addEventListener( 'input', () => {
+    if ( filterTimer ) {
+      clearTimeout( filterTimer );
+    }
+    filterTimer = setTimeout( triggerFilter, 200 );
+  } );
+
+
+  function triggerFilter() {
+
+    // get filter term
+    const term = document.querySelector( '#filter' )?.value || null;
+
+    for( const entry of document.querySelectorAll( '.variable-item') ) {
+
+      if( term ) {
+
+        // only show, if filter term is included
+        if( ! entry.textContent?.includes( term ) ) {
+          entry.classList.add( 'hidden' );
+        } else {
+          entry.classList.remove( 'hidden' );
+        }
+
+      } else {
+
+        // if no filter term is set, show all entries
+        entry.classList.remove( 'hidden' );
+
+      }
+    }
+  }
+
+})();

.code/templates/styles.css

@@ -29,7 +29,7 @@ body {
   color: #333;
   line-height: 1.6;
   display: grid;
-  grid-template-rows: 170px calc( 100% - 230px ) 60px;
+  grid-template-rows: 190px calc( 100% - 250px ) 60px;
   grid-template-areas: "top" "center" "bottom";
 }
 
@@ -107,3 +107,11 @@ footer {
   width: 80vw;
   height: 50vh;
 }
+
+#filter {
+  width: 20em;
+  max-width: 80%;
+}
+.hidden {
+  display: none;
+}