datalist-polyfill.js
function(event) {
		var datalistSelect = event.currentTarget,
			datalist = datalistSelect.parentNode,
			input = dcmnt.querySelector('input[list="' + datalist.id + '"]');

		// Check for whether the events target was a select or whether the input doesn't exist
		if (datalistSelect.tagName.toLowerCase() !== 'select' || input === null) {
			return;
		}

		var eventType = event.type,
			// ENTER and ESC
			visible =
				eventType === 'keydown' &&
				(event.keyCode !== keyENTER && event.keyCode !== keyESC);

		// On change, click or after pressing ENTER or TAB key, input the selects value into the input on a change within the list
		if (
			(eventType === 'change' ||
				eventType === 'click' ||
				(eventType === 'keydown' &&
					(event.keyCode === keyENTER || event.key === 'Tab'))) &&
			datalistSelect.value.length > 0 &&
			datalistSelect.value !== datalist.title
		) {
			setInputValue(input, datalistSelect.value);

			// Dispatch the input event on the related input[list]
			dispatchInputEvent(input);

			// Finally focusing the input, as other browser do this as well
			if (event.key !== 'Tab') {
				input.focus();
			}

			// #GH-51 / Prevent the form to be submitted on selecting a value via ENTER key within the select
			if (event.keyCode === keyENTER) {
				event.preventDefault();
			}

			// Set the visibility to false afterwards, as we're done here
			visible = false;
		} else if (eventType === 'keydown' && event.keyCode === keyESC) {
			// In case of the ESC key being pressed, we still want to focus the input[list]
			input.focus();
		}

		// Toggle the visibility of the datalist select according to previous checks
		toggleVisibility(visible, datalistSelect);
	}
function(event) {
		var datalistSelect = event.currentTarget,
			datalist = datalistSelect.parentNode,
			input = dcmnt.querySelector('input[list="' + datalist.id + '"]');

		// Check for whether the events target was a select or whether the input doesn't exist
		if (datalistSelect.tagName.toLowerCase() !== 'select' || input === null) {
			return;
		}

		var eventType = event.type,
			// ENTER and ESC
			visible =
				eventType === 'keydown' &&
				(event.keyCode !== keyENTER && event.keyCode !== keyESC);

		// On change, click or after pressing ENTER or TAB key, input the selects value into the input on a change within the list
		if (
			(eventType === 'change' ||
				eventType === 'click' ||
				(eventType === 'keydown' &&
					(event.keyCode === keyENTER || event.key === 'Tab'))) &&
			datalistSelect.value.length > 0 &&
			datalistSelect.value !== datalist.title
		) {
			setInputValue(input, datalistSelect.value);

			// Dispatch the input event on the related input[list]
			dispatchInputEvent(input);

			// Finally focusing the input, as other browser do this as well
			if (event.key !== 'Tab') {
				input.focus();
			}

			// #GH-51 / Prevent the form to be submitted on selecting a value via ENTER key within the select
			if (event.keyCode === keyENTER) {
				event.preventDefault();
			}

			// Set the visibility to false afterwards, as we're done here
			visible = false;
		} else if (eventType === 'keydown' && event.keyCode === keyESC) {
			// In case of the ESC key being pressed, we still want to focus the input[list]
			input.focus();
		}

		// Toggle the visibility of the datalist select according to previous checks
		toggleVisibility(visible, datalistSelect);
	}
function ( event ) { var datalistSelect = event . currentTarget , datalist = datalistSelect . parentNode , input = dcmnt . querySelector ( 'input[list="' + datalist . id + '"]' ) ; // Check for whether the events target was a select or whether the input doesn't exist if ( datalistSelect . tagName . toLowerCase ( ) !== 'select' || input === null ) { return ; } var eventType = event . type , // ENTER and ESC visible = eventType === 'keydown' && ( event . keyCode !== keyENTER && event . keyCode !== keyESC ) ; // On change, click or after pressing ENTER or TAB key, input the selects value into the input on a change within the list if ( ( eventType === 'change' || eventType === 'click' || ( eventType === 'keydown' && ( event . keyCode === keyENTER || event . key === 'Tab' ) ) ) && datalistSelect . value . length > 0 && datalistSelect . value !== datalist . title ) { setInputValue ( input , datalistSelect . value ) ; // Dispatch the input event on the related input[list] dispatchInputEvent ( input ) ; // Finally focusing the input, as other browser do this as well if ( event . key !== 'Tab' ) { input . focus ( ) ; } // #GH-51 / Prevent the form to be submitted on selecting a value via ENTER key within the select if ( event . keyCode === keyENTER ) { event . preventDefault ( ) ; } // Set the visibility to false afterwards, as we're done here visible = false ; } else if ( eventType === 'keydown' && event . keyCode === keyESC ) { // In case of the ESC key being pressed, we still want to focus the input[list] input . focus ( ) ; } // Toggle the visibility of the datalist select according to previous checks toggleVisibility ( visible , datalistSelect ) ; }
Change, Click, Blur, Keydown
Change Click Blur Keydown