Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
datalist-polyfill
Advanced tools
An extremely lightweight and library-dependency-free vanilla JavaScript datalist polyfill.
This is a minimal and library dependency-free vanilla JavaScript polyfill for the awesome datalist-functionality, that will bring joy and happiness into our lives :-)
Tested in Safari, for which it's mainly meant for, as nearly all of the others are already supporting it - quite - well: http://caniuse.com/#feat=datalist
No dependencies, written in plain JavaScript. Released under the MIT License: http://www.opensource.org/licenses/mit-license.php
<option>
sinput[type=email]
elements multiple attribute.options
for datalist
elements and .list
for input
elementsESC
and ENTER
The plugin was designed with the following concepts kept in mind:
Just integrate both the CSS and JavaScript file into your code - et voilà.
You may optionally load via NPM or Bower:
$ npm install datalist-polyfill
$ bower install datalist-polyfill
Nothing really, just plug it in, it will work out of the box.
We're even also enabling the .options
(for datalist
elements) and .list
(for input
elements) properties according to the specs.
And you'd like to set a title
-Attribute on the <datalist>
HTML tag, as this would get used as label for the first, disabled entry within the polyfilling select.
In case that you'd like to dynamically add or modify / create your HTML code, you're even also good to go with this polyfill, as it's based on event delegation that makes your UI work easily - no (refresh) function to call after DOM manipulation or something similar.
option
elementsIf you'd like to make a change to the integrated list of <option>
elements, feel free to either remove or add them right away - the list would get generated on the fly after the user typed in something into the <input>
field, so I've even also got you covered on this.
You could even also disable <option>
elements by adding the disabled
attribute to the <option>
HTML tag if necessary.
See the polyfill in action either by downloading / forking this repo and have a look at demo.html
, or at the hosted demo on JSFiddle: https://jsfiddle.net/mfranzke/s6awjfze/
<form>
are missing, and I've left the latin letters and english expressions even also for the right to left text-direction example. But lets focus on the relevant tags that this polyfill is all about for the demo.<select>
element to polyfill the functionality of the <datalist>
functionality, as it brought most of the functionality, whereas I accepted that it doesn't behave and doesn't look totally equally.
<option>
elements.multiple
attribute, as this is most likely even already what you're up to regarding appearance, but it does result in - surprise - the possibility for multiple selections, which isn't always <datalist>
elements kind of thing ...classlist
polyfillSupported by Christian and Johannes.
Simplified the styling and got rid of the external CSS files / dependency. You could remove that one now. Yeah!
Added RTL text-direction support
Added support for multiple email addresses, separated by comma. And again, updated documentation slightly. And demo accordingly.
Simple code style modifications. Because style matters.
Added .options (for datalist
elements) and .list (for input
elements) properties according to the specs.
Further simplified the code, so that we could even skip the .matches()
polyfill. Yeah. And documentation updates.
fixed another simple bug that lead to an incorrect index being selected - let's skip this, as it's not even the standard behaviour
some small corrections
better preselection on entries within the dropdown depending on the inputs value
added a package.json
file
Small, but important typo. :-) Thanks Fyrd for mentioning this.
First release.
Personally I even also do like the "keep it simple" approach provided within the W3C specs even already: https://www.w3.org/TR/html5/forms.html#the-datalist-element
But on the other hand this leads to an additional visible field, but doesn't emulate the (hopefully, fingers crossed) upcoming x-browser implementation and leaves unnecessary syntax for all of the clients that wouldn't even need it (anymore).
If you're trying out and using my work, feel free to contact me and give me any feedback. I'm curious about how it's gonna be used.
[1.5.0] - 2017-06-10
FAQs
A minimal and dependency-free vanilla JavaScript datalist polyfill. Supports all standard's functionality as well as mimics other browsers behavior.
The npm package datalist-polyfill receives a total of 4,972 weekly downloads. As such, datalist-polyfill popularity was classified as popular.
We found that datalist-polyfill demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.