Get started with Selectivity.js CDN

MIT licensed

Selectivity.js is a lightweight CSS selector engine for JS.

Tags:
  • custom
  • template
  • loading indicators

Stable version

Copied!

How to start using Selectivity.js CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with Selectivity.js CDN - cdnhub.io</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.cdnhub.io/Selectivity.js/3.1.0/selectivity-full.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const select = document.querySelector('#my-select');
      const list = document.querySelector('#my-list');

      const selectivity = new Selectivity(select);

      selectivity
        .on('change', () => {
          const selectedValue = select.value;
          const items = list.querySelectorAll('li');

          items.forEach((item) => {
            const matches = selectivity.matches(item);
            item.style.display = matches ? 'list-item' : 'none';
          });
        });

      select.addEventListener('change', () => {
        selectivity.refresh();
      });
    });
  </script>
</head>
<body>
  <label for="my-select">Filter:</label>
  <select id="my-select">
    <option value="all">Show all</option>
    <option value="apple">Apples</option>
    <option value="banana">Bananas</option>
    <option value="orange">Oranges</option>
  </select>

  <ul id="my-list">
    <li data-select="apple">Apple</li>
    <li data-select="banana">Banana</li>
    <li data-select="apple orange">Apple and Orange</li>
    <li data-select="orange">Orange</li>
    <li data-select="banana apple">Banana and Apple</li>
  </ul>
</body>
</html>

All versions