datalist-polyfill.js
function(input, datalist) {
		// Check for whether it's of one of the supported input types defined at the beginning
		// Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly
		// and still check for an existing instance
		if (
			(input.getAttribute('type') &&
				supportedTypes.indexOf(input.getAttribute('type')) === -1) ||
			datalist === null
		) {
			return;
		}

		var rects = input.getClientRects(),
			// Measurements
			inputStyles = window.getComputedStyle(input),
			datalistSelect = dcmnt.createElement('select');

		// Setting a class for easier identifying that select afterwards
		datalistSelect.setAttribute('class', classNamePolyfillingSelect);

		// Set general styling related definitions
		datalistSelect.style.position = 'absolute';

		// Initially hiding the datalist select
		toggleVisibility(false, datalistSelect);

		// The select itself shouldn't be a possible target for tabbing
		datalistSelect.setAttribute('tabindex', '-1');

		// WAI ARIA attributes
		datalistSelect.setAttribute('aria-live', 'polite');
		datalistSelect.setAttribute('role', 'listbox');
		if (!touched) {
			datalistSelect.setAttribute('aria-multiselectable', 'false');
		}

		// The select should get positioned underneath the input field ...
		if (inputStyles.getPropertyValue('display') === 'block') {
			datalistSelect.style.marginTop =
				'-' + inputStyles.getPropertyValue('margin-bottom');
		} else {
			var direction =
				inputStyles.getPropertyValue('direction') === 'rtl' ? 'right' : 'left';

			datalistSelect.style.setProperty(
				'margin-' + direction,
				'-' +
					(rects[0].width +
						parseFloat(inputStyles.getPropertyValue('margin-' + direction))) +
					'px'
			);
			datalistSelect.style.marginTop =
				parseInt(rects[0].height + (input.offsetTop - datalist.offsetTop), 10) +
				'px';
		}

		// Set the polyfilling selects border-radius equally to the one by the polyfilled input
		datalistSelect.style.borderRadius = inputStyles.getPropertyValue(
			'border-radius'
		);
		datalistSelect.style.minWidth = rects[0].width + 'px';

		if (touched) {
			var messageElement = dcmnt.createElement('option');

			// ... and it's first entry should contain the localized message to select an entry
			messageElement.innerText = datalist.title;
			// ... and disable this option, as it shouldn't get selected by the user
			messageElement.disabled = true;
			// ... and assign a dividable class to it
			messageElement.setAttribute('class', 'message');
			// ... and finally insert it into the select
			datalistSelect.appendChild(messageElement);
		}

		// Add select to datalist element ...
		datalist.appendChild(datalistSelect);

		// ... and our upfollowing functions to the related event
		if (touched) {
			datalistSelect.addEventListener('change', changeDataListSelect);
		} else {
			datalistSelect.addEventListener('click', changeDataListSelect);
		}

		datalistSelect.addEventListener('blur', changeDataListSelect);
		datalistSelect.addEventListener('keydown', changeDataListSelect);
		datalistSelect.addEventListener('keypress', datalistSelectKeyPress);

		return datalistSelect;
	}
function(input, datalist) {
		// Check for whether it's of one of the supported input types defined at the beginning
		// Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly
		// and still check for an existing instance
		if (
			(input.getAttribute('type') &&
				supportedTypes.indexOf(input.getAttribute('type')) === -1) ||
			datalist === null
		) {
			return;
		}

		var rects = input.getClientRects(),
			// Measurements
			inputStyles = window.getComputedStyle(input),
			datalistSelect = dcmnt.createElement('select');

		// Setting a class for easier identifying that select afterwards
		datalistSelect.setAttribute('class', classNamePolyfillingSelect);

		// Set general styling related definitions
		datalistSelect.style.position = 'absolute';

		// Initially hiding the datalist select
		toggleVisibility(false, datalistSelect);

		// The select itself shouldn't be a possible target for tabbing
		datalistSelect.setAttribute('tabindex', '-1');

		// WAI ARIA attributes
		datalistSelect.setAttribute('aria-live', 'polite');
		datalistSelect.setAttribute('role', 'listbox');
		if (!touched) {
			datalistSelect.setAttribute('aria-multiselectable', 'false');
		}

		// The select should get positioned underneath the input field ...
		if (inputStyles.getPropertyValue('display') === 'block') {
			datalistSelect.style.marginTop =
				'-' + inputStyles.getPropertyValue('margin-bottom');
		} else {
			var direction =
				inputStyles.getPropertyValue('direction') === 'rtl' ? 'right' : 'left';

			datalistSelect.style.setProperty(
				'margin-' + direction,
				'-' +
					(rects[0].width +
						parseFloat(inputStyles.getPropertyValue('margin-' + direction))) +
					'px'
			);
			datalistSelect.style.marginTop =
				parseInt(rects[0].height + (input.offsetTop - datalist.offsetTop), 10) +
				'px';
		}

		// Set the polyfilling selects border-radius equally to the one by the polyfilled input
		datalistSelect.style.borderRadius = inputStyles.getPropertyValue(
			'border-radius'
		);
		datalistSelect.style.minWidth = rects[0].width + 'px';

		if (touched) {
			var messageElement = dcmnt.createElement('option');

			// ... and it's first entry should contain the localized message to select an entry
			messageElement.innerText = datalist.title;
			// ... and disable this option, as it shouldn't get selected by the user
			messageElement.disabled = true;
			// ... and assign a dividable class to it
			messageElement.setAttribute('class', 'message');
			// ... and finally insert it into the select
			datalistSelect.appendChild(messageElement);
		}

		// Add select to datalist element ...
		datalist.appendChild(datalistSelect);

		// ... and our upfollowing functions to the related event
		if (touched) {
			datalistSelect.addEventListener('change', changeDataListSelect);
		} else {
			datalistSelect.addEventListener('click', changeDataListSelect);
		}

		datalistSelect.addEventListener('blur', changeDataListSelect);
		datalistSelect.addEventListener('keydown', changeDataListSelect);
		datalistSelect.addEventListener('keypress', datalistSelectKeyPress);

		return datalistSelect;
	}
function ( input , datalist ) { // Check for whether it's of one of the supported input types defined at the beginning // Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly // and still check for an existing instance if ( ( input . getAttribute ( 'type' ) && supportedTypes . indexOf ( input . getAttribute ( 'type' ) ) === - 1 ) || datalist === null ) { return ; } var rects = input . getClientRects ( ) , // Measurements inputStyles = window . getComputedStyle ( input ) , datalistSelect = dcmnt . createElement ( 'select' ) ; // Setting a class for easier identifying that select afterwards datalistSelect . setAttribute ( 'class' , classNamePolyfillingSelect ) ; // Set general styling related definitions datalistSelect . style . position = 'absolute' ; // Initially hiding the datalist select toggleVisibility ( false , datalistSelect ) ; // The select itself shouldn't be a possible target for tabbing datalistSelect . setAttribute ( 'tabindex' , '-1' ) ; // WAI ARIA attributes datalistSelect . setAttribute ( 'aria-live' , 'polite' ) ; datalistSelect . setAttribute ( 'role' , 'listbox' ) ; if ( ! touched ) { datalistSelect . setAttribute ( 'aria-multiselectable' , 'false' ) ; } // The select should get positioned underneath the input field ... if ( inputStyles . getPropertyValue ( 'display' ) === 'block' ) { datalistSelect . style . marginTop = '-' + inputStyles . getPropertyValue ( 'margin-bottom' ) ; } else { var direction = inputStyles . getPropertyValue ( 'direction' ) === 'rtl' ? 'right' : 'left' ; datalistSelect . style . setProperty ( 'margin-' + direction , '-' + ( rects [ 0 ] . width + parseFloat ( inputStyles . getPropertyValue ( 'margin-' + direction ) ) ) + 'px' ) ; datalistSelect . style . marginTop = parseInt ( rects [ 0 ] . height + ( input . offsetTop - datalist . offsetTop ) , 10 ) + 'px' ; } // Set the polyfilling selects border-radius equally to the one by the polyfilled input datalistSelect . style . borderRadius = inputStyles . getPropertyValue ( 'border-radius' ) ; datalistSelect . style . minWidth = rects [ 0 ] . width + 'px' ; if ( touched ) { var messageElement = dcmnt . createElement ( 'option' ) ; // ... and it's first entry should contain the localized message to select an entry messageElement . innerText = datalist . title ; // ... and disable this option, as it shouldn't get selected by the user messageElement . disabled = true ; // ... and assign a dividable class to it messageElement . setAttribute ( 'class' , 'message' ) ; // ... and finally insert it into the select datalistSelect . appendChild ( messageElement ) ; } // Add select to datalist element ... datalist . appendChild ( datalistSelect ) ; // ... and our upfollowing functions to the related event if ( touched ) { datalistSelect . addEventListener ( 'change' , changeDataListSelect ) ; } else { datalistSelect . addEventListener ( 'click' , changeDataListSelect ) ; } datalistSelect . addEventListener ( 'blur' , changeDataListSelect ) ; datalistSelect . addEventListener ( 'keydown' , changeDataListSelect ) ; datalistSelect . addEventListener ( 'keypress' , datalistSelectKeyPress ) ; return datalistSelect ; }
Define function for setting up the polyfilling select
Define function for setting up the polyfilling select