DEV Community: Alexander Pechkarev

How to Generate Product Variant Permutations in Vanilla JavaScript

Alexander Pechkarev — Sat, 20 Sep 2025 11:19:51 +0000

Ever wondered how e-commerce sites manage all the possible combinations of a product? A t-shirt might come in 4 sizes, 5 colors, and 3 styles. Manually listing every single one would be a nightmare.

Today, we'll build a clean, interactive component in vanilla JavaScript that solves this exact problem. It will take a set of options and dynamically generate every possible combination, updating in real-time as you make selections.

Here's a sneak peek of what we'll be building:

Ready? Let's dive in.

1. The HTML: A Simple Foundation

First, we need a basic structure to hold our options and the results. The HTML is straightforward: two containers are all we need.

<!-- permutations.html -->
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- We'll use Tailwind CSS for styling -->
    <link href="./index.css" rel="stylesheet">
    <script type="module" src="./permutations.js"></script>
</head>
<body>
    <div class="p-8 bg-gray-50 min-h-screen">
        <div class="max-w-4xl mx-auto">
            <header class="mb-8">
                <h1 class="text-3xl font-bold">Product Variant Combinations</h1>
                <p class="text-gray-600">Select options to see all possible combinations.</p>
            </header>

            <!-- Our JS will populate this container -->
            <div id="options-container" class="space-y-6"></div>

            <div class="mt-10 pt-6 border-t">
                <h2 class="text-2xl font-semibold">Resulting Combinations</h2>
                <!-- And the results will appear here -->
                <div id="results-container" class="p-4 mt-4 bg-white rounded-lg shadow-sm"></div>
            </div>
        </div>
    </div>
</body>
</html>

2. The Data: Structuring Our Options

Before we write any logic, we need a clean way to represent our product options. An array of objects is perfect for this. Each object represents a category (like "Size"), and contains its possible variants.

// permutations.js
const optionsData = [
  {
    name: "Size",
    variants: [
      { label: "Small", value: "Small", checked: true },
      { label: "Medium", value: "Medium", checked: true },
      { label: "Large", value: "Large", checked: false },
    ],
  },
  {
    name: "Colour",
    variants: [
      { label: "Blue", value: "Blue", checked: true },
      { label: "White", value: "White", checked: true },
    ],
  },
  {
    name: "Pattern",
    variants: [
      { label: "Plain", value: "Plain", checked: true },
      { label: "Logo", value: "Logo", checked: false },
    ],
  },
];

This structure is scalable and easy to manage. The checked property lets us set a default state.

3. The Core Logic: The Permutation Engine

This is where the magic happens. Our goal is to take the selected options and generate all combinations. We'll do this with a single, powerful function.

The logic can be broken down into two steps:

Step 1: Get the selected variants.
We first need to transform our optionsData into a simpler array of arrays, containing only the value of the variants that are currently checked.

function calculatePermutations() {
  const activeVariants = optionsData
    .map((option) =>
      option.variants.filter((v) => v.checked).map((v) => v.value)
    )
    .filter((arr) => arr.length > 0);

  // ...
}

If "Small," "Medium," "Blue," and "Plain" are selected, activeVariants will look like this:
[['Small', 'Medium'], ['Blue'], ['Plain']]

Step 2: Use reduce to create the combinations.
Now we'll use the reduce method to iterate through activeVariants and build our final list. reduce is perfect for taking an array and "reducing" it to a single value—in our case, a final array of all combinations.

// ... next part of calculatePermutations()

const combinations = activeVariants.reduce((acc, current) => {
  // If the accumulator is empty, just return the first set of variants.
  if (acc.length === 0) {
    return current.map((item) => [item]);
  }

  // Otherwise, combine the existing accumulator with the current set.
  const newCombinations = [];
  acc.forEach((accItem) => {
    current.forEach((currentItem) => {
      newCombinations.push([...accItem, currentItem]);
    });
  });

  return newCombinations;
}, []); // Start with an empty accumulator array.

Let's trace it:

Initial Call: acc is [], current is ['Small', 'Medium']. The function returns [['Small'], ['Medium']].
Second Call: acc is [['Small'], ['Medium']], current is ['Blue']. The loops run and produce [['Small', 'Blue'], ['Medium', 'Blue']].
Third Call: acc is [['Small', 'Blue'], ['Medium', 'Blue']], current is ['Plain']. The loops run again, giving us our final result: [['Small', 'Blue', 'Plain'], ['Medium', 'Blue', 'Plain']].

4. Bringing it to Life: The UI Functions

The logic is done, but we need to let users interact with it. We'll create functions to render the options and the results.

The renderOptions() function loops through optionsData and creates the HTML for our checkboxes. Crucially, it adds an event listener to each one.

function renderOptions() {
  const optionsContainer = document.getElementById("options-container");
  optionsContainer.innerHTML = ""; // Clear previous options

  optionsData.forEach((option, index) => {
    // ... create container divs and titles ...

    option.variants.forEach((variant) => {
      // ... create labels and checkboxes ...

      checkbox.addEventListener("change", (e) => {
        variant.checked = e.target.checked;
        renderOptions(); // Re-render the UI to show the new selection state
        calculatePermutations(); // Re-run the calculation!
      });

      // ... append elements ...
    });
  });
}

The change event listener is the key. It updates the checked state in our optionsData and then re-runs our rendering and calculation functions. This is what makes the component interactive.

Finally, renderResults() simply takes the array from calculatePermutations() and displays it as a list.

function renderResults(combinations) {
  const resultsContainer = document.getElementById("results-container");
  resultsContainer.innerHTML = ""; // Clear old results

  const list = document.createElement("ul");
  list.className = "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3";

  combinations.forEach((combo) => {
    const listItem = document.createElement("li");
    listItem.className = "bg-gray-100 p-2 rounded-md text-center";
    listItem.textContent = combo.join(" / ");
    list.appendChild(listItem);
  });

  resultsContainer.appendChild(list);
}

Conclusion

And there you have it! We've built a powerful, reusable, and interactive permutation generator with just a handful of vanilla JavaScript functions. By combining a clean data structure with the power of map, filter, and reduce, we solved a complex real-world problem in an elegant way.

How would you use this in your projects? Let me know in the comments below!

How to Build an Autocomplete Component from scratch in Vanilla JS

Alexander Pechkarev — Sun, 31 Aug 2025 13:15:58 +0000

I've always found that one of the best ways to truly understand a concept is to build it from scratch. That's why I wrote this guide. I wanted to break down the autocomplete—a component we use every day—into its fundamental parts. My hope is that by building it together, you'll not only gain a powerful new tool for your projects but also a deeper appreciation for the details that create a great user experience. Let's dive in!

Autocomplete is a feature that users have come to expect. It makes interfaces faster, smarter, and more user-friendly. While it might seem complex, building a professional-grade autocomplete component from scratch is an excellent way to sharpen your vanilla JavaScript skills.

In this tutorial, we'll build a fully-featured, accessible, and performant autocomplete component. We will cover:

Fetching data from a live API (jsonplaceholder.typicode.com).
Filtering results and dynamically rendering a suggestions list.
Implementing keyboard navigation (Up, Down, Enter, Escape).
Adding debouncing to prevent excessive API calls.
Ensuring accessibility with ARIA attributes.
Styling the component with Tailwind CSS.

Finally, we'll see how the principles we've learned apply to more specialised libraries like places-autocomplete-js for handling Google Maps address lookups.

The Final Result

Here's what we'll be building: a clean, fast, and accessible autocomplete for searching users.

The HTML Structure (`autocomplete.html`)

We'll start with a simple but powerful HTML structure. The key is the <input> element, which we'll augment with several ARIA attributes to make it accessible.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete Example</title>
    <!-- We are using Tailwind CSS for styling -->
    <link href="./index.css" rel="stylesheet">
    <style>
        /* Custom styles for the suggestion list */
        .suggestions-list {
            border: 1px solid #ddd;
            border-top: none;
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 200px;
            overflow-y: auto;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .suggestions-list li {
            padding: 10px;
            cursor: pointer;
        }
        .suggestions-list li.selected {
            background-color: #f0f0f0;
        }
        .suggestions-list .no-results {
            padding: 10px;
            color: #888;
            cursor: default;
        }
    </style>
</head>
<body>
    <div class="p-10">
        <h1 class="text-2xl font-bold mb-4">Autocomplete Example</h1>
        <div class="autocomplete-container relative w-full max-w-xs">
            <input 
                type="text" 
                id="autocomplete-input"
                class="border-2 border-gray-300 rounded-md p-2 w-full"
                placeholder="Search for a user..." 
                autocomplete="off" 
                role="combobox" 
                aria-autocomplete="list" 
                aria-haspopup="true" 
                aria-expanded="false" 
                aria-controls="suggestions-list" 
            />
            <ul id="suggestions-list" class="suggestions-list absolute w-full bg-white" role="listbox"></ul>
        </div>
    </div>
    <script src="app.js" type="module"></script>
</body>
</html>

The ARIA attributes tell screen readers that this input is a combobox that will display a list of suggestions, whether the list is expanded, and which element it controls.

The JavaScript Logic (`app.js`)

This is where the magic happens. Our app.js file handles everything from fetching data to managing user interaction.

1. Fetching and Debouncing

First, we fetch the user data from the JSONPlaceholder API. To avoid overwhelming the API (and our own code) with requests as the user types, we wrap our input handler in a debounce function. This ensures the search logic only runs after the user has paused typing for 300ms.

// Debounce function to limit the rate of API calls
const debounce = (func, delay) => {
    let timeoutId;
    return (...args) => {
        if (timeoutId) clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func(...args);
        }, delay);
    };
};

// Handle input event
const handleInput = (e) => {
    const query = e.target.value.toLowerCase();
    if (query.length < 1) {
        clearSuggestions();
        return;
    }
    const filteredSuggestions = allUsers.filter(user => 
        user.name.toLowerCase().includes(query)
    );
    renderSuggestions(filteredSuggestions);
};

// Attach the debounced handler
input.addEventListener('input', debounce(handleInput, 300));

2. Rendering Suggestions

The renderSuggestions function dynamically creates the list of <li> elements. For each suggestion, we set an id and role="option" for accessibility. We also update aria-expanded to true so screen readers know the list is now visible.

  // Render suggestions in the dropdown
  const renderSuggestions = (suggestions) => {
    // clear previous suggestions
    clearSuggestions();
    // set aria-expanded attribute
    input.setAttribute("aria-expanded", "true");

    // Show "No results found" message if no suggestions
    if (suggestions.length === 0) {
      const li = document.createElement("li");
      li.textContent = "No results found";
      li.classList.add("no-results");
      suggestionsList.appendChild(li);
      return;
    }

    // iterate over suggestions and create list items
    // for each suggestion, create a list item and append it to the suggestions list
    suggestions.forEach((suggestion, index) => {
      const li = document.createElement("li");
      li.id = `suggestion-${index}`;
      li.setAttribute("role", "option");
      li.innerHTML = `
                <span class="main-text">${suggestion.name}</span>
                <span class="secondary-text text-gray-500 block text-sm">${suggestion.email}</span>
            `;
      li.dataset.index = index;

      // add event listener for suggestion click
      // when a suggestion is clicked, set the input value to the suggestion name
      li.addEventListener("click", () => {
        input.value = suggestion.name;
        clearSuggestions();
      });

      // append the list item to the suggestions list
      suggestionsList.appendChild(li);
    });
  };

3. Keyboard Navigation and Accessibility

A professional autocomplete must be fully keyboard-navigable. We listen for ArrowDown, ArrowUp, Enter, and Escape.

When the user navigates with the arrow keys, the updateSelectedSuggestion function highlights the active item and, crucially, updates the aria-activedescendant attribute on the input. This tells the screen reader which option is currently focused, providing a seamless experience for all users.

  // Update the selected suggestion
  // Highlight the selected suggestion
const updateSelectedSuggestion = () => {
    const suggestions = suggestionsList.querySelectorAll('li:not(.no-results)');
    suggestions.forEach((li, index) => {
        if (index === selectedSuggestionIndex) {
            li.classList.add('selected');
            // This is key for accessibility!
            input.setAttribute('aria-activedescendant', li.id);
        } else {
            li.classList.remove('selected');
        }
    });
};

The Complete `app.js`

// Initialise the application
document.addEventListener("DOMContentLoaded", () => {
  // initialise variables
  const input = document.getElementById("autocomplete-input");
  const suggestionsList = document.getElementById("suggestions-list");
  let allUsers = [];
  let selectedSuggestionIndex = -1;

  // Debounce function to limit the rate of API calls
  const debounce = (func, delay) => {
    let timeoutId;
    return (...args) => {
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
      timeoutId = setTimeout(() => {
        func(...args);
      }, delay);
    };
  };

  // fetch users from API
  const fetchUsers = async () => {
    try {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      );
      allUsers = await response.json();
    } catch (error) {
      console.error("Error fetching users:", error);
    }
  };

  // Render suggestions in the dropdown
  const renderSuggestions = (suggestions) => {
    // clear previous suggestions
    clearSuggestions();
    // set aria-expanded attribute
    input.setAttribute("aria-expanded", "true");

    // Show "No results found" message if no suggestions
    if (suggestions.length === 0) {
      const li = document.createElement("li");
      li.textContent = "No results found";
      li.classList.add("no-results");
      suggestionsList.appendChild(li);
      return;
    }

    // iterate over suggestions and create list items
    // for each suggestion, create a list item and append it to the suggestions list
    suggestions.forEach((suggestion, index) => {
      const li = document.createElement("li");
      li.id = `suggestion-${index}`;
      li.setAttribute("role", "option");
      li.innerHTML = `
                <span class="main-text">${suggestion.name}</span>
                <span class="secondary-text text-gray-500 block text-sm">${suggestion.email}</span>
            `;
      li.dataset.index = index;

      // add event listener for suggestion click
      // when a suggestion is clicked, set the input value to the suggestion name
      li.addEventListener("click", () => {
        input.value = suggestion.name;
        clearSuggestions();
      });

      // append the list item to the suggestions list
      suggestionsList.appendChild(li);
    });
  };

  // clear suggestions
  const clearSuggestions = () => {
    suggestionsList.innerHTML = "";
    selectedSuggestionIndex = -1;
    // set aria-expanded attribute
    input.setAttribute("aria-expanded", "false");
    // remove aria-activedescendant attribute
    input.removeAttribute("aria-activedescendant");
  };

  // Update the selected suggestion
  // Highlight the selected suggestion
  const updateSelectedSuggestion = () => {
    const suggestions = suggestionsList.querySelectorAll("li:not(.no-results)");
    // find the currently selected suggestion and highlight it
    suggestions.forEach((li, index) => {
      if (index === selectedSuggestionIndex) {
        // add selected class
        li.classList.add("selected");
        // scroll the selected suggestion into view
        li.scrollIntoView({ block: "nearest" });
        // set aria-activedescendant attribute
        input.setAttribute("aria-activedescendant", li.id);
      } else {
        // remove selected class
        li.classList.remove("selected");
      }
    });
  };

  // Handle input event
  const handleInput = (e) => {
    // Get the input value
    const query = e.target.value.toLowerCase();

    // Clear suggestions if input is empty
    if (query.length < 1) {
      clearSuggestions();
      return;
    }

    // Filter suggestions based on input
    const filteredSuggestions = allUsers.filter((user) =>
      user.name.toLowerCase().includes(query)
    );
    // render the filtered suggestions
    renderSuggestions(filteredSuggestions);
  };

  // Attach the debounced handler
  input.addEventListener("input", debounce(handleInput, 300));
  // Handle keyboard navigation
  input.addEventListener("keydown", (e) => {
    // get the current suggestions
    const suggestions = suggestionsList.querySelectorAll("li:not(.no-results)");
    // check if there are any suggestions and if the suggestions list is open
    if (
      suggestions.length === 0 ||
      input.getAttribute("aria-expanded") === "false"
    )
      return;

    // Handle arrow key down navigation and move down the suggestions
    if (e.key === "ArrowDown") {
      e.preventDefault();
      selectedSuggestionIndex =
        (selectedSuggestionIndex + 1) % suggestions.length;
      updateSelectedSuggestion();

      // Handle arrow key up navigation and move up the suggestions
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      selectedSuggestionIndex =
        (selectedSuggestionIndex - 1 + suggestions.length) % suggestions.length;
      updateSelectedSuggestion();

      // Handle enter key and select the suggestion
    } else if (e.key === "Enter") {
      e.preventDefault();
      if (selectedSuggestionIndex > -1) {
        suggestions[selectedSuggestionIndex].click();
      }
      // Handle escape key and close the suggestions
    } else if (e.key === "Escape") {
      clearSuggestions();
    }
  });

  // Fetch users
  fetchUsers();
});

Applying These Principles in the Real World

The autocomplete component we've built is a powerful, general-purpose foundation. These features—debouncing, keyboard navigation, and accessibility—can be adapted for countless applications, from searching products to tagging articles.

As a prime example of a specialised application, consider places-autocomplete-js

This library acts as a wrapper for the Google Maps Places (New) API. It provides a convenient autocomplete gateway for the user to search, filter, and navigate the complex responses from the API and select a desired address. It takes care of the API's specific requirements (like session tokens and structured data), so the developer can focus on using the final address data.

Let's Discuss!

Thanks for reading! I hope you found this tutorial helpful. Building components like this is a journey, and there are always new things to learn.

What are your thoughts? Would you approach this differently?
Have any questions? Leave a comment below.
How would you use this? I'd love to hear how you might use these techniques in your own projects.

If you found this article useful, please consider sharing it on social media or with your co-workers.

Conclusion

Building a feature-rich autocomplete from scratch is a fantastic way to master core JavaScript skills. The techniques covered here provide a solid foundation for creating interactive and user-friendly components.

DEV Community: Alexander Pechkarev

How to Generate Product Variant Permutations in Vanilla JavaScript

1. The HTML: A Simple Foundation

2. The Data: Structuring Our Options

3. The Core Logic: The Permutation Engine

4. Bringing it to Life: The UI Functions

Conclusion

How to Build an Autocomplete Component from scratch in Vanilla JS

The Final Result

The HTML Structure (autocomplete.html)

The JavaScript Logic (app.js)

1. Fetching and Debouncing

2. Rendering Suggestions

3. Keyboard Navigation and Accessibility

The Complete app.js

Applying These Principles in the Real World

Let's Discuss!

Conclusion

The HTML Structure (`autocomplete.html`)

The JavaScript Logic (`app.js`)

The Complete `app.js`