Get started with completer CDN

MIT licensed

Completer.js: Minimal library for managing, chaining, and handling JS promises.

Tags:
  • auto
  • complete
  • jquery
  • plugin
  • html
  • css
  • javacript
  • front-end
  • web
  • development

Stable version

Copied!

How to start using completer CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with completer CDN - cdnhub.io</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/completer.min.js"></script>
</head>
<body>
  <input type="text" id="autocomplete-input" class="autocomplete" autocomplete="off">
  <ul id="autocomplete-list"></ul>

  <script>
    const input = document.getElementById('autocomplete-input');
    const list = document.getElementById('autocomplete-list');

    const suggestions = [
      'Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry', 'Fig', 'Grape', 'Honeydew', 'Ice Cream', 'Jackfruit', 'Kiwi', 'Lemon', 'Mango', 'Nectarine', 'Orange', 'Pineapple', 'Quince', 'Raspberry', 'Strawberry', 'Tangerine', 'Ugli Fruit', 'Vanilla', 'Watermelon', 'Xigua', 'Yellow Watermelon', 'Zucchini'
    ];

    const completable = new Completer('input', { suggestions });

    completable.on('select', (e) => {
      input.value = e.item;
      list.style.display = 'none';
    });

    input.addEventListener('input', () => {
      list.style.display = 'block';
      const filtered = suggestions.filter((suggestion) => suggestion.toLowerCase().startsWith(input.value.toLowerCase()));
      completable.update(filtered);
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions