HTML Datalist Polyfill For Safari

Category: Form , Javascript | June 13, 2018
Author: mfranzke
Views Total: 1,751
Official Page: Go to website
Last Update: June 13, 2018
License: MIT


HTML Datalist Polyfill For Safari


This is an HTML <datalist> tag Polyfill to provide the accessible datalist functionality on those browsers that don’t support it.

How to use it:

Assume that you have a dropdown list with with pre-defined values as this:

<datalist id="animallist" title="Suggestions to choose from">
  <option value="Cat">
  <option value="Cow">
  <option value="Dog">
  <option value="Horse">
  <option value="Lion">
  <option value="Pig" disabled>
  <option value="Zebra">

Download and insert the JavaScript file ‘datalist-polyfill.min.js’ at the bottom of the webpage. That’s it.

<script src="datalist-polyfill.min.js"></script>


v1.14.0 (06/13/2018)

  • Added MutationObserver to even also capture changes to the option elements as a correction to enhance the current functionality.
  • Changed some URLs from HTTP to the new kid on the block: HTTPS.
  • Additionally did some necessary updates to the documentation.

v1.13.2 (06/11/2018)

  • Focusing the input[list] after selecting a suggestion

v1.13.1 (06/05/2018)

  • Some code refactoring

Leave a Reply