Get started with datalist-polyfill CDN

MIT licensed

Library for HTML5 datalist use in old browsers.

Tags:
  • datalist
  • polyfill
  • javascript
  • html
  • autosuggest
  • autosuggester
  • suggest
  • suggester
  • select

Stable version

Copied!

How to start using datalist-polyfill CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with datalist-polyfill CDN - cdnhub.io</title>
  <link rel="dns-prefetch" href="https://cdn.cdnhub.io">
  <script src="https://cdn.cdnhub.io/datalist-polyfill/1.25.1/datalist-polyfill.min.js" defer></script>
</head>
<body>
  <label for="city">City:</label>
  <input list="cities" id="city" name="city">
  <datalist id="cities">
    <option value="New York">
    <option value="Los Angeles">
    <option value="Chicago">
    <option value="Miami">
    <option value="San Francisco">
  </datalist>
  <p>Your selection:</p>
  <p id="selection"></p>

  <script>
    const cityInput = document.getElementById('city');
    const selectionEl = document.getElementById('selection');

    cityInput.addEventListener('input', (event) => {
      selectionEl.textContent = event.target.value;
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions