diff --git a/datalist-polyfill.js b/datalist-polyfill.js index 4b8b610..922a851 100644 --- a/datalist-polyfill.js +++ b/datalist-polyfill.js @@ -86,7 +86,7 @@ 'input[list="' + datalistNeedsAnUpdate.id + '"]' ); - if (input.value !== '') { + if (getInputValue(input) !== '') { // Prepare the options and toggle the visiblity afterwards toggleVisibility( prepOptions(datalistNeedsAnUpdate, input).length, @@ -114,7 +114,7 @@ if (isGteIE10 || isEDGE) { // On keypress check for value if ( - input.value !== '' && + getInputValue(input) !== '' && !keyOpen && event.keyCode !== keyENTER && event.keyCode !== keyESC @@ -137,7 +137,7 @@ if ( event.keyCode !== keyESC && event.keyCode !== keyENTER && - (input.value !== '' || keyOpen) && + (getInputValue(input) !== '' || keyOpen) && datalistSelect !== undefined ) { // ... prepare the options @@ -166,6 +166,8 @@ // On keypress check all options for that as a substring, save the original value as a data-attribute and preset that inputs value (for sorting) for all option values (probably as well enhanced by a token) var updateIEOptions = function(input, datalist) { + var inputValue = getInputValue(input); + // Loop through the options Array.prototype.slice.call(datalist.options, 0).forEach(function(option) { var originalValue = option.dataset.originalvalue || option.value; @@ -187,8 +189,8 @@ - and the original string, that is still necessary e.g. for sorting within the suggestions list As the value is being inserted on users selection, we'll replace that one within the upfollowing inputInputListIE function */ - option.value = isValidSuggestion(option, input.value) - ? input.value + uniquePolyfillString + originalValue.toLowerCase() + option.value = isValidSuggestion(option, inputValue) + ? inputValue + uniquePolyfillString + originalValue.toLowerCase() : originalValue; }); }; @@ -208,11 +210,11 @@ // Query for related option - and escaping the value as doublequotes wouldn't work var option = datalist.querySelector( - 'option[value="' + input.value.replace(/\\([\s\S])|(")/g, '\\$1$2') + '"]' + 'option[value="' + getInputValue(input).replace(/\\([\s\S])|(")/g, '\\$1$2') + '"]' ); if (option && option.dataset.originalvalue) { - input.value = option.dataset.originalvalue; + setInputValue(input, option.dataset.originalvalue); } }; @@ -276,7 +278,7 @@ visible = datalistSelect && datalistSelect.querySelector('option:not(:disabled)') && - ((event.type === 'focusin' && input.value !== '') || + ((event.type === 'focusin' && getInputValue(input) !== '') || (event.relatedTarget && event.relatedTarget === datalistSelect)); // Toggle the visibility of the datalist select according to previous checks @@ -317,6 +319,30 @@ input.className += ' ' + classNameInput; }; + // Get the input value for dividing regular and mail types + var getInputValue = function(input) { + // In case of type=email and multiple attribute, we would need to grab the last piece + // Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly + return ( + input.getAttribute('type') === 'email' && + input.getAttribute('multiple') !== null + ) ? input.value.substring(input.value.lastIndexOf(',') + 1) : input.value; + }; + + // Set the input value for dividing regular and mail types + var setInputValue = function(input, datalistSelectValue) { + var lastSeperator; + + // In case of type=email and multiple attribute, we need to set up the resulting inputs value differently + input.value = + // Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly + input.getAttribute('type') === 'email' && + input.getAttribute('multiple') !== null && + (lastSeperator = input.value.lastIndexOf(',')) > -1 + ? input.value.slice(0, lastSeperator) + ',' + datalistSelectValue + : datalistSelectValue; + }; + // Binding the focus event - matching the input[list]s happens in the function afterwards dcmnt.addEventListener('focusin', changesInputList, true); @@ -335,19 +361,10 @@ datalistSelect = datalist.getElementsByClassName(classNamePolyfillingSelect)[0] || setUpPolyfillingSelect(input, datalist), - inputValue = input.value, + inputValue = getInputValue(input), newSelectValues = dcmnt.createDocumentFragment(), disabledValues = dcmnt.createDocumentFragment(); - // In case of type=email and multiple attribute, we would need to grab the last piece - // Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly - if ( - input.getAttribute('type') === 'email' && - input.getAttribute('multiple') !== null - ) { - inputValue = inputValue.substring(inputValue.lastIndexOf(',') + 1); - } - // Create an array out of the options list Array.prototype.slice .call(datalist.querySelectorAll('option:not(:disabled)')) @@ -567,16 +584,7 @@ datalistSelect.value.length > 0 && datalistSelect.value !== datalist.title ) { - var lastSeperator; - - // In case of type=email and multiple attribute, we need to set up the resulting inputs value differently - input.value = - // Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly - input.getAttribute('type') === 'email' && - input.getAttribute('multiple') !== null && - (lastSeperator = input.value.lastIndexOf(',')) > -1 - ? input.value.slice(0, lastSeperator) + ',' + datalistSelect.value - : datalistSelect.value; + setInputValue(input, datalistSelect.value); // Dispatch the input event on the related input[list] dispatchInputEvent(input); diff --git a/datalist-polyfill.min.js b/datalist-polyfill.min.js index 6c26725..4ad403e 100644 --- a/datalist-polyfill.min.js +++ b/datalist-polyfill.min.js @@ -44,9 +44,9 @@ void 0!==a&&(r=new a(function(e){var a=!1; // Look through all mutations that just occured if(e.forEach(function(e){ // Look through all added nodes of this mutation -for(var t=0;t