139 lines
4.4 KiB
JavaScript
139 lines
4.4 KiB
JavaScript
/**
|
|
* @author Scott O'Hara
|
|
* @license https://github.com/scottaohara/select-to-datalist/blob/master/LICENSE
|
|
*
|
|
*/
|
|
;(function ( w, doc ) {
|
|
//enable strict mode
|
|
'use strict';
|
|
|
|
// Local object for method references
|
|
var ProgDatalist = {};
|
|
|
|
// Meta
|
|
ProgDatalist.NS = "ProgDatalist";
|
|
ProgDatalist.AUTHOR = "Scott O'Hara";
|
|
ProgDatalist.VERION = "0.1.1";
|
|
ProgDatalist.LICENSE = "https://github.com/scottaohara/select-to-datalist/blob/master/LICENSE";
|
|
|
|
// Create accordion instances
|
|
ProgDatalist.create = function () {
|
|
|
|
var widget = doc.querySelectorAll('.progressive-datalist');
|
|
var widgetCount = widget.length;
|
|
|
|
// setup / cache vars
|
|
var self;
|
|
var selfID;
|
|
var cleanup = true;
|
|
var i;
|
|
|
|
// run a check to see if datalist is supported
|
|
if ( 'options' in document.createElement('datalist') ) {
|
|
|
|
// if supported, run through all instances of prog-datalist
|
|
// and convert the select elements to inputs w/datalists
|
|
for ( i = 0; i < widgetCount; i++ ) {
|
|
|
|
self = widget[i];
|
|
|
|
// the generated datalist will need an ID
|
|
var genID = 'datalist_' + Math.floor(Math.random() * 999) + 1;
|
|
|
|
// now find the select element by pulling it's ID from
|
|
// the 'for' attribute on the self container (label)
|
|
selfID = self.getAttribute('id');
|
|
|
|
// set the ID, grab the options, and placeholder the a for looping
|
|
var el = doc.getElementById(selfID);
|
|
var grabOptions = el.innerHTML;
|
|
var a;
|
|
|
|
// create new input
|
|
var newInput = doc.createElement('input');
|
|
|
|
// pull each of the attributes from the original <select>
|
|
// and place them onto the new text input, so important
|
|
// attributes like name, id and if it were required don't get
|
|
// lost in the transfer...
|
|
for ( var a = 0; a < el.attributes.length; a++ ) {
|
|
var attr = el.attributes.item(a);
|
|
newInput.setAttribute(attr.nodeName, attr.nodeValue);
|
|
}
|
|
// since this is a text input now, we also want to
|
|
// add a type, and point to the new datalist's ID
|
|
// with the list attribute.
|
|
newInput.setAttribute('type', 'text');
|
|
newInput.setAttribute('list', genID);
|
|
|
|
// create new datalist. Set its ID, and pull the
|
|
// original select element's options into the new element
|
|
var newDatalist = doc.createElement('datalist');
|
|
newDatalist.setAttribute('id', genID);
|
|
newDatalist.innerHTML = grabOptions;
|
|
|
|
// add the input & datalist to the original container
|
|
$(self).after(newInput);
|
|
$(self).after(newDatalist);
|
|
|
|
// if using the 'disabled' attribute trick to disallow
|
|
// the first "Select..." option from being selected by
|
|
// a user, remove that placeholder option from the new datalist
|
|
if ( self.querySelector('datalist option[disabled]') ) {
|
|
self.querySelector('datalist option[disabled]').remove();
|
|
}
|
|
|
|
// now find the original select element and remove it.
|
|
// if using the custom select box markup pattern,
|
|
// find the select-box class and remove it. If not
|
|
// using it, or using some other pattern, at least
|
|
// just remove the select element since it's no
|
|
// longer needed.
|
|
if ( self.querySelector('.select-box') ) {
|
|
self.querySelector('.select-box').remove();
|
|
}
|
|
else {
|
|
self.remove();
|
|
}
|
|
|
|
if ( self.hasAttribute('data-size') ) {
|
|
var getSize = self.getAttribute('data-size');
|
|
newInput.setAttribute('size', getSize);
|
|
|
|
if ( cleanup ) {
|
|
self.removeAttribute('data-size');
|
|
}
|
|
}
|
|
|
|
if ( self.hasAttribute('data-maxlength') ) {
|
|
var getMax = self.getAttribute('data-maxlength');
|
|
newInput.setAttribute('maxlength', getMax);
|
|
|
|
if ( cleanup ) {
|
|
self.removeAttribute('data-maxlength');
|
|
}
|
|
}
|
|
|
|
if ( self.hasAttribute('data-class') ) {
|
|
var getClass = self.getAttribute('data-class');
|
|
newInput.setAttribute('class', getClass);
|
|
|
|
if ( cleanup ) {
|
|
self.removeAttribute('data-class');
|
|
}
|
|
}
|
|
} // for(widgetCount)
|
|
}
|
|
}; // ProgDatalist.create()
|
|
|
|
|
|
ProgDatalist.init = function () {
|
|
ProgDatalist.create();
|
|
}; // ProgDatalist.init()
|
|
|
|
$(document).ready(function () {
|
|
ProgDatalist.init();
|
|
});
|
|
|
|
})( this, this.document );
|