datalist-polyfill.js
function(event) {
		var input = event.target,
			datalist = input.list,
			keyOpen = event.keyCode === keyUP || event.keyCode === keyDOWN;

		// Check for whether the events target was an input and still check for an existing instance of the datalist and polyfilling select
		if (input.tagName.toLowerCase() !== 'input' || datalist === null) {
			return;
		}

		// Handling IE10+ & EDGE
		if (isGteIE10 || isEDGE) {
			// On keypress check for value
			if (
				getInputValue(input) !== '' &&
				!keyOpen &&
				event.keyCode !== keyENTER &&
				event.keyCode !== keyESC &&
				// As only EDGE doesn't trigger the input event after selecting an item via mouse, we need to differentiate here
				(isGteIE10 || input.type === 'text')
			) {
				updateIEOptions(input, datalist);

				// TODO: Check whether this update is necessary depending on the options values
				input.focus();
			}

			return;
		}

		var visible = false,
			// Creating the select if there's no instance so far (e.g. because of that it hasn't been handled or it has been dynamically inserted)
			datalistSelect =
				datalist.getElementsByClassName(classNamePolyfillingSelect)[0] ||
				setUpPolyfillingSelect(input, datalist);

		// On an ESC or ENTER key press within the input, let's break here and afterwards hide the datalist select, but if the input contains a value or one of the opening keys have been pressed ...
		if (
			event.keyCode !== keyESC &&
			event.keyCode !== keyENTER &&
			(getInputValue(input) !== '' || keyOpen) &&
			datalistSelect !== undefined
		) {
			// ... prepare the options
			if (prepOptions(datalist, input).length > 0) {
				visible = true;
			}

			var firstEntry = 0,
				lastEntry = datalistSelect.options.length - 1;

			// ... preselect best fitting index
			if (touched) {
				datalistSelect.selectedIndex = firstEntry;
			} else if (keyOpen && input.getAttribute('type') !== 'number') {
				datalistSelect.selectedIndex =
					event.keyCode === keyUP ? lastEntry : firstEntry;

				// ... and on arrow up or down keys, focus the select
				datalistSelect.focus();
			}
		}

		// Toggle the visibility of the datalist select according to previous checks
		toggleVisibility(visible, datalistSelect);
	}
function(event) {
		var input = event.target,
			datalist = input.list,
			keyOpen = event.keyCode === keyUP || event.keyCode === keyDOWN;

		// Check for whether the events target was an input and still check for an existing instance of the datalist and polyfilling select
		if (input.tagName.toLowerCase() !== 'input' || datalist === null) {
			return;
		}

		// Handling IE10+ & EDGE
		if (isGteIE10 || isEDGE) {
			// On keypress check for value
			if (
				getInputValue(input) !== '' &&
				!keyOpen &&
				event.keyCode !== keyENTER &&
				event.keyCode !== keyESC &&
				// As only EDGE doesn't trigger the input event after selecting an item via mouse, we need to differentiate here
				(isGteIE10 || input.type === 'text')
			) {
				updateIEOptions(input, datalist);

				// TODO: Check whether this update is necessary depending on the options values
				input.focus();
			}

			return;
		}

		var visible = false,
			// Creating the select if there's no instance so far (e.g. because of that it hasn't been handled or it has been dynamically inserted)
			datalistSelect =
				datalist.getElementsByClassName(classNamePolyfillingSelect)[0] ||
				setUpPolyfillingSelect(input, datalist);

		// On an ESC or ENTER key press within the input, let's break here and afterwards hide the datalist select, but if the input contains a value or one of the opening keys have been pressed ...
		if (
			event.keyCode !== keyESC &&
			event.keyCode !== keyENTER &&
			(getInputValue(input) !== '' || keyOpen) &&
			datalistSelect !== undefined
		) {
			// ... prepare the options
			if (prepOptions(datalist, input).length > 0) {
				visible = true;
			}

			var firstEntry = 0,
				lastEntry = datalistSelect.options.length - 1;

			// ... preselect best fitting index
			if (touched) {
				datalistSelect.selectedIndex = firstEntry;
			} else if (keyOpen && input.getAttribute('type') !== 'number') {
				datalistSelect.selectedIndex =
					event.keyCode === keyUP ? lastEntry : firstEntry;

				// ... and on arrow up or down keys, focus the select
				datalistSelect.focus();
			}
		}

		// Toggle the visibility of the datalist select according to previous checks
		toggleVisibility(visible, datalistSelect);
	}
function ( event ) { var input = event . target , datalist = input . list , keyOpen = event . keyCode === keyUP || event . keyCode === keyDOWN ; // Check for whether the events target was an input and still check for an existing instance of the datalist and polyfilling select if ( input . tagName . toLowerCase ( ) !== 'input' || datalist === null ) { return ; } // Handling IE10+ & EDGE if ( isGteIE10 || isEDGE ) { // On keypress check for value if ( getInputValue ( input ) !== '' && ! keyOpen && event . keyCode !== keyENTER && event . keyCode !== keyESC && // As only EDGE doesn't trigger the input event after selecting an item via mouse, we need to differentiate here ( isGteIE10 || input . type === 'text' ) ) { updateIEOptions ( input , datalist ) ; // TODO: Check whether this update is necessary depending on the options values input . focus ( ) ; } return ; } var visible = false , // Creating the select if there's no instance so far (e.g. because of that it hasn't been handled or it has been dynamically inserted) datalistSelect = datalist . getElementsByClassName ( classNamePolyfillingSelect ) [ 0 ] || setUpPolyfillingSelect ( input , datalist ) ; // On an ESC or ENTER key press within the input, let's break here and afterwards hide the datalist select, but if the input contains a value or one of the opening keys have been pressed ... if ( event . keyCode !== keyESC && event . keyCode !== keyENTER && ( getInputValue ( input ) !== '' || keyOpen ) && datalistSelect !== undefined ) { // ... prepare the options if ( prepOptions ( datalist , input ) . length > 0 ) { visible = true ; } var firstEntry = 0 , lastEntry = datalistSelect . options . length - 1 ; // ... preselect best fitting index if ( touched ) { datalistSelect . selectedIndex = firstEntry ; } else if ( keyOpen && input . getAttribute ( 'type' ) !== 'number' ) { datalistSelect . selectedIndex = event . keyCode === keyUP ? lastEntry : firstEntry ; // ... and on arrow up or down keys, focus the select datalistSelect . focus ( ) ; } } // Toggle the visibility of the datalist select according to previous checks toggleVisibility ( visible , datalistSelect ) ; }
Function regarding the inputs interactions on keyup event
Function regarding the inputs interactions on keyup event