HTML Datalist Polyfill Library

Preview:

Description:

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">
</datalist>

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>

Changelog:

05/22/2022

• v.1.25.0

03/06/2021

• v.1.24.4

03/28/2020

• v.1.24.3

03/21/2020

• v.1.24.2

02/29/2020

• v.1.24.1

03/09/2019

• fixed to have a “correct” minification

01/26/2019

• No substring matching for multiple emailadress suggestions in IE10+ and EDGE

v1.23.2 (01/19/2019)

• Prevent the form to be submitted on selecting a value via ENTER key within the select

v1.23.0 (01/05/2019)

• Microsoft EDGE / datalist popups get “emptied” when receiving focus via tabbing

11/10/2018

• Fixed: TypeError: undefined is not an object (evaluating ‘i.setAttributeNode’)

08/18/2018

• using both suggestions label and value to identify the suggestion to the user

v1.21.2 (08/12/2018)

• Finally integrated the test regarding clicking the selects option elements, as this was actually previously prevented by the other bug fixed in the previous release

08/04/2018

• code and complexity simplifications

v1.20.1 (07/21/2018)

• Code simplifications
• Fixed: Suggestions aren‘t working onclick any more

v1.18.2 (07/10/2018)

• Dispatch the input event as well on the related input[list] on using the Backspace key within the polyfilling select
• Defined the system-font for the demo-page
• Renamed some variables to some more meaningful names
• Cleanup on some unnecessary variables & comments
• Removed an old separation in between eventTarget-Tagnames of select and option, that was integrated due to the mouse-event, which has been replaced again a while ago

v1.17.0 (07/08/2018)

• Include behavior on pressing Tab or other printable keys

v1.16.2 (07/04/2018)

• Fixed a bug that lead to an incorrectly selected suggestion (first instead of last) while using the up key on the input element
• Fix for input[list] elements with class attribute – thanks to @mricherzhagen for mentioning this and even also providing a solution

v1.16.0/1 (06/28/2018)

• Made a lot of code changes in relation to what the previously mentioned linters reported.
• Made some code changes in relation to what the previously mentioned linters reported.

v1.15.0/1 (06/27/2018)

• Bugfix

v1.14.4 (06/21/2018)

• Fixed For IE9: After choosing a suggestion out of the polyfilling select, the select itself wouldn’t get hidden.

v1.14.3 (06/21/2018)

• Changed the order in a comparison as this simplifies the response.
• Hiding the polyfilling select on pressing ENTER, which is equal to the behavior on typing ESC.
• Made some necessary changes to enhance the current demo page by the minimum amount of relevant HTML tags that should be included within every page (and even also added the IE related meta tag due to backward compatibility).
• Removed some sample code out of the readme page due to the new NPM websites layout.
• Bugfixed.

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