Lookahead Dropdown Block

blocks/community-directory/community-directory.js

@@ -15,7 +15,7 @@ export default async function decorate(block) {
   const list = document.createElement('div');
   list.classList.add('cards-list');
   index.data.forEach((community) => {
-    const communityName = community['LiveBy Community'];
+    const communityName = community['liveby-community'];
 
     const card = document.createElement('div');
     card.classList.add('cards-item');

blocks/look-ahead-list/look-ahead-list.css

@@ -0,0 +1,106 @@
+.section.look-ahead-list-container {
+  display: block;
+  justify-content: center;
+  align-items: center;
+}
+
+.look-ahead-list-container > .default-content-wrapper {
+  text-align: center;
+}
+
+.look-ahead-list-container > .look-ahead-list-wrapper {
+  text-align: center;
+}
+
+.look-ahead-list .dropdown {
+  display: flex;
+  text-align: center;
+  border: 1px solid var(--primary-color);
+}
+
+.look-ahead-list .dropdown:focus-within {
+  box-shadow: 0 0 0 1px rgb(38 132 255);
+}
+
+.look-ahead-list {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.look-ahead-list input {
+  width: 97%;
+  padding: 5px 0 5px 20px;
+  font-size: 16px;
+  text-transform: uppercase;
+  border: 0;
+}
+
+.look-ahead-list input:focus {
+  border: 0;
+  outline: none;
+}
+
+.look-ahead-list > div::after {
+  position: relative;
+  top: 8pt;
+  content: "";
+  display: inline-block;
+  width: 0.7em;
+  height: 0.7em;
+  margin-right: 8px;
+  border-right: 2px solid #ccc;
+  border-top: 2px solid #ccc;
+  transform: rotate(45deg);
+}
+
+.look-ahead-list > div:hover::after {
+  border-right: 2px solid #999;
+  border-top: 2px solid #999;
+}
+
+/* Style for the dropdown content */
+.look-ahead-list .dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  box-shadow: 0 0 0 1px rgba(0 0 0 / 10%), 0 4px 11px rgba(0 0 0 / 10%);
+  max-height: 200px;
+  width: 100%;
+  overflow-y: auto;
+  top: 39px;
+  z-index: 1;
+}
+
+/* Style for the dropdown options */
+.look-ahead-list .dropdown-content a {
+  padding: 12px 16px;
+  display: block;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Style for the selected option */
+.look-ahead-list .dropdown-content a:hover {
+  background-color: var(--color-tertiary);
+}
+
+@media (min-width: 992px) {
+  .section.look-ahead-list-container {
+    width: 36%;
+  }
+
+  .section.look-ahead-list-container.community-directory-container .look-ahead-list {
+    max-width: 228px;
+  }
+
+  .section.look-ahead-list-container.community-directory-container {
+    width: 100%;
+  }
+
+  .section .look-ahead-list-wrapper {
+    text-align: left;
+    padding-left: 10px;
+  }
+}

blocks/look-ahead-list/look-ahead-list.js

@@ -0,0 +1,86 @@
+import { readBlockConfig } from '../../scripts/aem.js';
+
+// Get the communities from the community index
+let queryIndex;
+async function getQueryIndex() {
+  if (!queryIndex) {
+    const resp = await fetch('/communities/query-index.json');
+    if (resp.ok) {
+      queryIndex = await resp.json();
+    }
+  }
+  return queryIndex;
+}
+
+// Filter communties based on input control
+function filterFunction() {
+  let i;
+  const input = document.getElementById('myInput');
+  const filter = input.value.toUpperCase();
+  const div = document.getElementById('myDropdown');
+  const a = div.getElementsByTagName('a');
+  for (i = 0; i < a.length;) {
+    const txtValue = a[i].textContent || a[i].innerText;
+    if (txtValue.toUpperCase().indexOf(filter) > -1) {
+      a[i].style.display = '';
+    } else {
+      a[i].style.display = 'none';
+    }
+    i += 1;
+  }
+}
+
+// Show/hide the dropdown when clicking on the input field
+function dropClick(event) {
+  if (event.target.closest('.dropdown') !== null) {
+    document.getElementById('myDropdown').style.display = 'block';
+  }
+}
+
+// Close the dropdown if the user clicks outside of it
+function closeDropdown(event) {
+  let i;
+  if (!event.target.matches('#myInput')) {
+    const dropdowns = document.getElementsByClassName('dropdown-content');
+    for (i = 0; i < dropdowns.length;) {
+      const openDropdown = dropdowns[i];
+      if (openDropdown.style.display === 'block') {
+        openDropdown.style.display = 'none';
+      }
+      i += 1;
+    }
+  }
+}
+
+export default async function decorate(block) {
+  const config = readBlockConfig(block);
+  block.innerHTML = '';
+  const index = await getQueryIndex();
+
+  const list = document.createElement('div');
+  list.classList.add('dropdown');
+
+  const txtInput = document.createElement('input');
+  txtInput.type = 'text';
+  txtInput.placeholder = config.placeholder;
+  txtInput.id = 'myInput';
+  txtInput.addEventListener('input', filterFunction);
+  block.addEventListener('click', dropClick);
+  list.append(txtInput);
+
+  const dropContent = document.createElement('div');
+  dropContent.classList.add('dropdown-content');
+  dropContent.id = 'myDropdown';
+
+  index.data.forEach((community) => {
+    const communityName = community['liveby-community'];
+    const listItem = document.createElement('a');
+    listItem.href = community.path;
+    listItem.innerText = `${communityName.split(',')[0]} (${communityName})`;
+    dropContent.append(listItem);
+  });
+  list.append(dropContent);
+  block.append(list);
+}
+
+window.addEventListener('click', closeDropdown);

helix-query.yaml

@@ -0,0 +1,44 @@
+version: 1
+auto-generated: true
+indices:
+  default:
+    include:
+      - /**
+    exclude:
+      - /drafts/**
+      - /tools/**
+      - /seach/**
+    target: /query-index.json
+    properties:
+      lastModified:
+        select: none
+        value: parseTimestamp(headers["last-modified"], "ddd, DD MMM YYYY hh:mm:ss GMT")
+      title:
+        select: head > meta[property="og:title"]
+        value: attribute(el, "content")
+      image:
+        select: head > meta[property="og:image"]
+        value: match(attribute(el, "content"), "https:\/\/[^/]+(/.*)")
+      description:
+        select: head > meta[name="description"]
+        value: attribute(el, "content")
+  communities:
+    include:
+      - /communities/*
+    target: /communities/query-index.json
+    properties:
+      lastModified:
+        select: none
+        value: parseTimestamp(headers["last-modified"], "ddd, DD MMM YYYY hh:mm:ss GMT")
+      description:
+        select: head > meta[name="description"]
+        value: attribute(el, "content")
+      image:
+        select: head > meta[property="og:image"]
+        value: match(attribute(el, "content"), "https:\/\/[^/]+(/.*)")
+      title:
+        select: head > meta[property="og:title"]
+        value: attribute(el, "content")
+      liveby-community:
+        select: head > meta[name="liveby-community"]
+        value: attribute(el, "content")

styles/styles.css

@@ -17,6 +17,7 @@
   --primary-color: #552448;
   --primary-color-lighten: rgba(98 98 121 / 12.5%);
   --primary-color-svg-filter: invert(18%) sepia(17%) saturate(1944%) hue-rotate(264deg) brightness(93%) contrast(95%);
+  --color-tertiary: #eae3d4;
   --body-color: #3a3a3a;
   --platinum: #e7e7e7;
   --light-grey: #f6f6f6;