Scope search designs for Upcoming and Past pages

_sass/_layout.scss

@@ -230,6 +230,36 @@
     font-size: 20px;
 }
 
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+}
+
+.conference-search {
+    margin-bottom: 15px;
+}
+
+.conference-search__input {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid $grey-color-light;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+.conference-search__results,
+.conference-search__empty {
+    margin: 10px 0 0;
+}
+
 .post-list {
     margin-left: 0;
     list-style: none;

assets/conference-search.js

@@ -0,0 +1,57 @@
+document.addEventListener('DOMContentLoaded', function () {
+  var searchInputs = document.querySelectorAll('[data-conference-search-input]');
+
+  searchInputs.forEach(function (input) {
+    var listId = input.getAttribute('aria-controls');
+    var list = document.getElementById(listId);
+
+    if (!list) {
+      return;
+    }
+
+    var items = Array.from(list.querySelectorAll('li'));
+    var searchContainer = input.closest('.conference-search');
+    if (!searchContainer) {
+      return;
+    }
+    var results = searchContainer.querySelector('[data-conference-search-results]');
+    var emptyState = searchContainer.querySelector('[data-conference-search-empty]');
+
+    items.forEach(function (item) {
+      item.dataset.searchText = item.textContent.replace(/\s+/g, ' ').trim().toLowerCase();
+    });
+
+    function resultText(visibleCount, query) {
+      var noun = visibleCount === 1 ? 'result' : 'results';
+
+      if (query) {
+        return visibleCount + ' ' + noun + ' for "' + query + '"';
+      }
+
+      return '';
+    }
+
+    function filterItems() {
+      var displayQuery = input.value.replace(/\s+/g, ' ').trim();
+      var query = displayQuery.toLowerCase();
+      var visibleCount = 0;
+
+      items.forEach(function (item) {
+        var isMatch = !query || item.dataset.searchText.indexOf(query) !== -1;
+
+        item.hidden = !isMatch;
+
+        if (isMatch) {
+          visibleCount += 1;
+        }
+      });
+
+      results.textContent = resultText(visibleCount, displayQuery);
+      emptyState.hidden = visibleCount !== 0 || !query;
+    }
+
+    input.addEventListener('input', filterItems);
+    input.addEventListener('search', filterItems);
+    filterItems();
+  });
+});

index.html

@@ -2,8 +2,20 @@
 layout: default
 ---
 <div class="home">
+  <div class="conference-search">
+    <label class="visually-hidden" for="current-conference-search">Search upcoming conferences</label>
+    <input
+      id="current-conference-search"
+      class="conference-search__input"
+      type="search"
+      placeholder="Search upcoming conferences"
+      aria-controls="current-conference-list"
+      data-conference-search-input>
+    <p class="conference-search__results" data-conference-search-results aria-live="polite"></p>
+    <p class="conference-search__empty" data-conference-search-empty hidden>No upcoming conferences matched your search.</p>
+  </div>
 
-  <ul class="post-list">
+  <ul class="post-list conference-list" id="current-conference-list" data-conference-search-list>
     {% for current in site.data.current %}
       <li>
         <h2><a href="{{current.url}}">{{ current.name }}</a></h2>
@@ -15,3 +27,4 @@ <h2><a href="{{current.url}}">{{ current.name }}</a></h2>
     {% endfor %}
   </ul>
 </div>
+<script src="{{ "/assets/conference-search.js" | prepend: site.baseurl }}"></script>

past.html

@@ -4,7 +4,20 @@
 title: Past Software Testing Conferences
 ---
 
-<ul class="post-list">
+<div class="conference-search">
+  <label class="visually-hidden" for="past-conference-search">Search past conferences</label>
+  <input
+    id="past-conference-search"
+    class="conference-search__input"
+    type="search"
+    placeholder="Search past conferences"
+    aria-controls="past-conference-list"
+    data-conference-search-input>
+  <p class="conference-search__results" data-conference-search-results aria-live="polite"></p>
+  <p class="conference-search__empty" data-conference-search-empty hidden>No past conferences matched your search.</p>
+</div>
+
+<ul class="post-list conference-list" id="past-conference-list" data-conference-search-list>
   {% for past in site.data.past %}
   <li>
     <h2><a href="{{past.url}}">{{ past.name }}</a></h2>
@@ -16,4 +29,5 @@ <h2><a href="{{past.url}}">{{ past.name }}</a></h2>
         Videos</a>{% endif %}
   </li>
   {% endfor %}
-</ul>
+</ul>
+<script src="{{ "/assets/conference-search.js" | prepend: site.baseurl }}"></script>