Get started with clusterize.js CDN

MIT licensed

Clusterize.js: Lightweight library for real-time, scrolling, clustering of large data sets .

Tags:
  • large
  • vanillajs
  • table
  • grid
  • list
  • scroll
  • cluster

Stable version

Copied!

How to start using clusterize.js CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with clusterize.js CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/clusterize.min.css">
  <script src="https://cdn.cdnhub.io/clusterize.js/0.19.0/clusterize.min.js"></script>
</head>
<body>
  <div id="container">
    <input type="text" id="search-box" placeholder="Search...">
    <ul id="items-list">
      <li class="item">Item 1</li>
      <li class="item">Item 2</li>
      <li class="item">Item 3</li>
      <li class="item">Item 4</li>
      <li class="item">Item 5</li>
      <li class="item">Item 6</li>
      <li class="item">Item 7</li>
      <li class="item">Item 8</li>
      <li class="item">Item 9</li>
      <li class="item">Item 10</li>
    </ul>
  </div>

  <script>
    const container = document.getElementById('container');
    const searchBox = document.getElementById('search-box');
    const itemsList = document.getElementById('items-list');

    const options = {
      value: '',
      layout: {
        type: 'vertical'
      },
      template: '<li class="item">{{value}}</li>',
      filter: function (item, query) {
        return item.toLowerCase().indexOf(query.toLowerCase()) > -1;
      }
    };

    const clusteredSelect = new Clusterize.createClusterize(searchBox, options);

    itemsList.addEventListener('click', function (event) {
      if (event.target.tagName === 'LI') {
        searchBox.value = event.target.textContent;
      }
    });

    itemsList.addEventListener('mouseover', function () {
      clusteredSelect.update();
    });

    searchBox.addEventListener('input', function () {
      clusteredSelect.value = searchBox.value;
      clusteredSelect.update();
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions