Get started with zensh-ui-autocomplete CDN

MIT licensed

Zensh-ui-autocomplete is a Vue.js component that provides an autocomplete feature for user input.

Tags:
  • AngularJS
  • Autocomplete
  • jQuery UI

Stable version

Copied!

How to start using zensh-ui-autocomplete CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zen-styles/dist/zen-styles.min.css">
  <script src="https://cdn.jsdelivr.net/npm/zen-core@0.11.3/dist/zen-core.min.js"></script>
  <script src="https://cdn.cdnhub.io/zensh-ui-autocomplete/0.6.1/autocomplete.min.js"></script>
  <style>
    #autocomplete-container {
      position: absolute;
      z-index: 1;
      width: 100%;
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid #ccc;
      border-top: none;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      background-color: #fff;
    }
  </style>
</head>
<body>
  <input type="text" id="autocomplete-input" placeholder="Type something...">
  <ul id="autocomplete-container"></ul>

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

    const autocomplete = new window.ZenAutocomplete(input, {
      minLength: 1,
      source: async (query, callback) => {
        const response = await fetch('/api/autocomplete?query=' + encodeURIComponent(query));
        const data = await response.json();
        callback(data);
      },
      templates: {
        suggestion: (item) => `<li><a href="${item.url}">${item.label}</a></li>`
      },
      onSelect: (item) => {
        input.value = item.label;
        container.style.display = 'none';
      }
    });

    input.addEventListener('focus', () => {
      container.style.display = 'block';
    });

    input.addEventListener('input', () => {
      autocomplete.search();
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions