tag search

src/_includes/layouts/base.njk

@@ -21,6 +21,7 @@
   {% block foot %}
   {% endblock %}
   <script type="text/javascript" src="/js/components/menu-toggle.js" async defer></script>
+  <script type="text/javascript" src="/js/components/search.js" async defer></script>
   <script type="text/javascript" src="/vendor/js/bootstrap.min.js" async defer></script>
   <script>
     if ('serviceWorker' in navigator) {

src/_includes/layouts/team.njk

@@ -7,10 +7,13 @@
     <div class="[ wrapper ]">
       <h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1>
       {{ content | safe }}
-      <h2 class="[ gap-top-700 ]">{{ tagSearchHeading }}</h2>
-      <ul class="tag-list mt-3">
+      <div class="search-bar">
+        <label for="site-search">Filtrer par mots-clés :</label>
+        <input type="search" id="searchInput" name="q" aria-label="Filtrer par mots-clés" oninput="doSearch()">
+      </div>
+      <ul class="tag-list mt-3" id="tagList">
         {% for skill in collections.skillsList %}
-          <li class="tag-item"><a href="/equipe/{{ skill }}">{{ skill }}</a></li>
+          <li class="tag-item visually-hidden"><a href="/equipe/{{ skill }}">{{ skill }}</a></li>
         {% endfor %}
       </ul>
     </div>
@@ -18,5 +21,5 @@
     {% include "partials/components/map.njk" %}
     {% include "partials/components/contact-form.njk" %}
   </main>
-  
+
 {% endblock %}

src/js/components/search.js

@@ -0,0 +1,14 @@
+function doSearch() {
+  const searchStr = document.getElementById('searchInput').value;
+  const tagList = document.getElementById('tagList').getElementsByClassName('tag-item');
+  
+  for (const tag of tagList) {
+      const value = tag.querySelector('a').innerHTML;
+     
+      if (searchStr.length && value.toLowerCase().match(searchStr.toLowerCase())) {
+          tag.classList.remove('visually-hidden');
+      } else {
+          tag.classList.add('visually-hidden');
+      }
+  }
+}

src/scss/components/_search-bar.scss

@@ -0,0 +1,16 @@
+.search-bar {
+  display: flex;
+  align-items: center;
+  // justify-content: flex-end;
+  margin-top: 3rem;
+
+  label {
+    // flex-grow: 1;
+  }
+
+  input[type=search] {
+    width: auto;
+    margin: 0 0 0 1rem;
+    background-color: var(--color-light-gray);
+  }
+}

src/scss/global.scss

@@ -76,5 +76,6 @@ img {
 @import 'components/partner';
 @import 'components/skip-link';
 @import 'components/video-player';
+@import 'components/search-bar';
 @import 'components/tags';
 @import 'utilities/responsive';