Shopify Intellisense without CSS inherit

Autocomplete an input with the product list from your store. With default design of black & white.

// ############################################################################
// declaring variables
// ############################################################################

var doneTypingInterval = 100;
var maxSuggestions = 5;
let source_products = [];
let products = [];
let collections = [];
let collectionsFetched_bool = false;
let collectionsFetchPage = 1;
let current_list_index = -1;
let productsFetched_bool = false;
let ul;
let inputElement;
var typingTimer;

// ############################################################################
// defining functions
// ############################################################################

async function fetchAllCollections() {
  collectionsFetched_bool = false;
  collectionsFetchPage = 1;
  while (collectionsFetched_bool === false) {
    await fetch(
      `https://${window.location.hostname}/collections.json?limit=250;page=${collectionsFetchPage}`
    )
      .then((response) => response.json())
      .then((data) => {
        if (data["collections"].length === 0) {
          collectionsFetched_bool = true;
        }
        for (let i = 0; i  response.json())
    .then((data) => {
      for (let i = 0; i  {
    fetchProductsForCollection(collection["handle"]);
  });
}

function appendRowToSuggestionsUl(value, classes = []) {
  let newRow = document.createElement("li");
  newRow.classList.add("intellisenseSuggestionsRow");
  newRow.innerHTML = value;
  for (let cls of classes) {
    newRow.classList.add(cls);
  }
  ul.appendChild(newRow);
}

function clearSuggestionsUl() {
  ul.innerHTML = "";
}

function hideSuggestionsUl() {
  if (document.querySelector(`#intellisense_style`)) {
    document.querySelector(`#intellisense_style`).remove();
  }
}

function addListNavigationFunctionality(inputElement) {
  // search for form tag of the input element
  let inputElement_parent = inputElement;
  let form;
  while (inputElement_parent) {
    inputElement_parent = inputElement_parent.parentElement;
    if (inputElement_parent.tagName.toLowerCase() === "form") {
      form = inputElement_parent;
      break;
    }
  }

inputElement.addEventListener("keydown", (e) => {
    if (e.keyCode !== 13) {
      unhideSuggestionsUl(ul.classList.contains("ulFixed"));
    }
    switch (e.keyCode) {
      case 13:
        e.preventDefault();
        // enter key

let tw_toggled = false;
        document
          .querySelectorAll(".intellisenseSuggestionsRow")
          .forEach((row) => {
            if (row.classList.contains("tw_toggled")) {
              tw_toggled = true;
            }
          });

if (!tw_toggled) {
          if (form) {
            form.submit();
          }
          break;
        } else if (current_list_index == -1) {
          select_choice(0);
        } else {
          select_choice(current_list_index);
        }
        try {
          document
            .querySelectorAll(".intellisenseSuggestionsRow")
            [current_list_index].classList.remove("tw_toggled");
        } catch {}
        current_list_index = 0;
        break;

case 38:
        // up arrow
        current_list_index -= 1;
        if (current_list_index =
          document.querySelectorAll(".intellisenseSuggestionsRow").length
        ) {
          // reset counter to 0 when value becomes larger than list size
          current_list_index = 0;
          // reset scroll to top of window
        }
        toggle_options(current_list_index);
        break;

default:
        // normal text input
        clearTimeout(typingTimer);
        typingTimer = setTimeout(() => {
          displaySuggestionsOnInputElement(inputElement);
          current_list_index = -1;
          toggle_options(current_list_index);
        }, doneTypingInterval);
    }
  });
}

function removeAllChildNodes(parent) {
  while (parent.firstChild) {
    parent.removeChild(parent.firstChild);
  }
}

function select_choice(index) {
  document
    .querySelector(".suggestions-list-intellisense")
    .children[index].click();
}

function resizeSuggestionsUl(inputElementIsFixed) {
  let elRect = inputElement.getBoundingClientRect();

if (inputElementIsFixed) {
    if (ul.style.top !== elRect.bottom + "px") {
      ul.style.top = elRect.bottom + "px";
    }

if (ul.style.left !== elRect.left + "px") {
      ul.style.left = elRect.left + "px";
    }

if (ul.style.width !== window.getComputedStyle(inputElement).width) {
      ul.style.width = window.getComputedStyle(inputElement).width;
    }
  } else {
    if (ul.style.top !== window.scrollY + elRect.bottom + "px") {
      ul.style.top = window.scrollY + elRect.bottom + "px";
    }

if (ul.style.left !== window.scrollX + elRect.left + "px") {
      ul.style.left = window.scrollX + elRect.left + "px";
    }

if (ul.style.width !== window.getComputedStyle(inputElement).width) {
      ul.style.width = window.getComputedStyle(inputElement).width;
    }
  }
}

function setSuggestionRowsEventListeners(ul) {
  let suggestionRows = document.querySelectorAll(`.intellisenseSuggestionsRow`);

for (let row of suggestionRows) {
    row.addEventListener("click", (e) => {
      e.preventDefault();

let selectionValue = e.target.textContent;

// insert selection into search field and clear suggestions
      inputElement.value = selectionValue;
      clearSuggestionsUl();
      hideSuggestionsUl();
    });
    row.parentNode.addEventListener("click", (e) => {
      try {
        e.stopEventPropagation();
      } catch {}
    });
    window.addEventListener("click", () => {
      hideSuggestionsUl(ul);
    });
  }
}

function displaySuggestionsOnInputElement(inputElem) {
  if (inputElem.value.length > 0) {
    let intellisenseSuggestions = source_products
      .filter((product) => {
        if (
          product.toLowerCase().indexOf(inputElem.value.toLowerCase()) != -1
        ) {
          return true;
        }
      })
      .slice(0, maxSuggestions);

if (intellisenseSuggestions.length === 0) {
      clearSuggestionsUl();
      hideSuggestionsUl();
    }

clearSuggestionsUl();
    unhideSuggestionsUl(ul.classList.contains("ulFixed"));

// leaving only unique suggestions
    intellisenseSuggestionsArray = [...new Set(intellisenseSuggestions)];

for (let suggestion of intellisenseSuggestionsArray) {
      if (typeof suggestion !== "undefined") {
        appendRowToSuggestionsUl(suggestion);
      }
    }

resizeSuggestionsUl(ul.classList.contains("ulFixed"));
    setSuggestionRowsEventListeners(ul);
  } else {
    clearSuggestionsUl(ul);
    hideSuggestionsUl(ul);
  }
}

if (inputElementIsFixed) {
    ul.classList.add("ulFixed");
  } else {
    ul.classList.add("ulNotFixed");
  }

// carry over some style of the input field
  document.head.insertAdjacentHTML(
    "beforeend",
    `
        
        .intellisenseSuggestionsRow {
            font-size: ${window.getComputedStyle(inputElement)["fontSize"]};
            font-family: 'Helvetica', 'Arial', sans-serif;
            color: black !important;
            line-height: ${window.getComputedStyle(inputElement)["lineHeight"]};
            background-color: white !important;
          }
        
        `
  );

//setup before functions

window.addEventListener("resize", () => {
    let suggestionsUls = document.querySelectorAll(
      ".suggestions-list-intellisense"
    );
    for (let ul of suggestionsUls) {
      let fixed = false;
      if (ul.classList.contains("ulFixed")) {
        fixed = true;
      }

if (window.getComputedStyle(ul)["display"] !== "none") {
        resizeSuggestionsUl(fixed);
      }
    }
  });

inputElement.addEventListener("click", () => {
    unhideSuggestionsUl(ul.classList.contains("ulFixed"));
  });
  inputElement.parentElement.addEventListener("click", (e) => {
    e.stopPropagation();
  });
}

// ############################################################################
// activating functionality
// ############################################################################

fetchAllProducts();

document.body.insertAdjacentHTML(
  "beforeend",
  `
      <ul class="suggestions-list-intellisense">
      </ul>
  `
);

ul = document.querySelector(".suggestions-list-intellisense");

locateSearchInput();

applySiteIntellisenseToInputElement(inputElement);

addListNavigationFunctionality(inputElement);

Overview

Autocomplete an input with the product list from your store. It has a default design of black and white background and text.

Screenshots

Developer

Daniel Mizrachi

Uploaded 12 variants

Reviews

out of 0

Thank you! Your submission has been received!

Explore more resources

You can use Twik's widgets to create beautiful, effective variants on your website such as popups, shorter forms, and more.

Explore

Try it now

See what Twik can do for you with our free 14-day evaluation period, limited to 1,000 pageviews.

Features