datalist-polyfill - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

bower.json

 {
     "name": "datalist-polyfill",
 	"description": "An extremely lightweight and library-dependency-free vanilla JavaScript datalist polyfill.",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "homepage": "https://github.com/mfranzke/datalist-polyfill",
@@ -6,0 +6,0 @@ "authors": [{

datalist-polyfill.js

@@ -0,1 +1,2 @@
+// @flow
 /*
@@ -49,3 +50,3 @@ * datalist-polyfill.js - https://github.com/mfranzke/datalist-polyfill
 						var $dataListOptions = $dataList.querySelectorAll( 'option[value]' ),
-							inputValue = $eventTarget.value.toLowerCase(),
+							inputValue = $eventTarget.value,
 							newSelectValues = document.createDocumentFragment(),
@@ -58,8 +59,10 @@ disabledValues = document.createDocumentFragment(),
 
+							// ... create an array out of the options list
+							var nodeArray = Array.prototype.slice.call( $dataListOptions ),
+								selected = false;
+
 							// ... sort all entries and
-							var nodeArray = Array.prototype.slice.call( $dataListOptions );
-
 							nodeArray.sort( function( a, b ) {
 							    return a.value.localeCompare( b.value );
-							}).forEach( function( opt ) {
+							}).forEach( function( opt, index ) {
 								var optionValue = opt.value;
@@ -69,4 +72,8 @@
 								// "Each option element that is a descendant of the datalist element, that is not disabled, and whose value is a string that isn't the empty string, represents a suggestion. Each suggestion has a value and a label." (W3C)
-							    if ( optionValue !== "" && optionValue.toLowerCase().indexOf( inputValue ) !== -1 && opt.disabled === false ) {
+							    if ( optionValue !== "" && optionValue.toLowerCase().indexOf( inputValue.toLowerCase() ) !== -1 && opt.disabled === false ) {
 								    opt.innerText = optionValue;
+								    
+								    if ( optionValue === inputValue ) {
+								    	selected = index;
+								    }
 
@@ -85,2 +92,5 @@ newSelectValues.appendChild( opt );
 							$dataListSelect.appendChild( newSelectValues );
+							
+							// preselect best fitting index
+							$dataListSelect.selectedIndex = selected || 0;
 
@@ -87,0 +97,0 @@ // input the unused options as siblings next to the select

datalist-polyfill.min.js

@@ -6,2 +6,2 @@ /*
 */
-!function(){"use strict";if(!("list"in document.createElement("input"))||(!document.createElement("datalist")||!window.HTMLDataListElement)){var e=function(e){var t=e.target;if(t.matches("input[list]")){var i=t.getAttribute("list"),r=document.getElementById(i);if(null!==r){var a=r.getElementsByTagName("select")[0];if(void 0!==a){if(27===e.keyCode)return a.classList.remove("visible"),void a.setAttribute("aria-hidden",!0);var n=r.querySelectorAll("option[value]"),l=t.value.toLowerCase(),o=document.createDocumentFragment(),s=document.createDocumentFragment(),u=!1;""!==l&&(Array.prototype.slice.call(n).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;""!==t&&-1!==t.toLowerCase().indexOf(l)&&!1===e.disabled?(e.innerText=t,o.appendChild(e),u=!0):s.appendChild(e)}),a.appendChild(o),r.appendChild(s)),a.classList.toggle("visible",u),a.setAttribute("aria-hidden",!u),38!==e.keyCode&&40!==e.keyCode||a.focus()}}}},t=function(r){var a=r.target;if(a.matches("input[list]")){var n=r.type,l=a.getAttribute("list"),o=document.getElementById(l);if(null!==o){var s=o.getElementsByTagName("select")[0],u="focus"===n&&""!==r.target.value||r.relatedTarget&&r.relatedTarget===s,d=o.title;if(void 0===s){var c=a.getClientRects(),p=document.createElement("option");s=document.createElement("select"),s.setAttribute("aria-hidden",!0),s.setAttribute("aria-live","polite"),s.setAttribute("role","listbox"),s.style.marginLeft="-"+c[0].width+"px",s.style.marginTop=c[0].height+"px",s.style.minWidth=c[0].width+"px",p.innerText=d,p.disabled=!0,s.appendChild(p),o.appendChild(s),s.addEventListener("change",i),s.addEventListener("blur",i),s.addEventListener("keyup",i),a.setAttribute("autocomplete","off"),a.setAttribute("role","textbox"),a.setAttribute("aria-haspopup","true"),a.setAttribute("aria-autocomplete","list"),a.setAttribute("aria-owns",l)}switch(s.classList.toggle("visible",u),s.setAttribute("aria-hidden",!u),n){case"focus":a.addEventListener("keyup",e),a.addEventListener("blur",t,!0);break;case"blur":a.removeEventListener("keyup",e),a.removeEventListener("blur",t,!0);break}}}},i=function(e){var t=e.target,i=t.parentNode.title;if(t.matches("select")){var r=e.type,a="keyup"===r&&13!==e.keyCode&&27!==e.keyCode;if("change"===r||"keyup"===r&&13===e.keyCode){var n=t.parentNode.id,l=document.querySelector('input[list="'+n+'"]'),o=t.value;null!==l&&o.length>0&&o!==i&&(l.value=o)}t.classList.toggle("visible",a),t.setAttribute("aria-hidden",!a)}};document.addEventListener("focus",t,!0),Element.prototype.matches||(Element.prototype.matches=Element.prototype.matchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector||Element.prototype.webkitMatchesSelector||function(e){for(var t=(this.document||this.ownerDocument).querySelectorAll(e),i=t.length;--i>=0&&t.item(i)!==this;);return i>-1})}}();
+!function(){"use strict";if(!("list"in document.createElement("input"))||(!document.createElement("datalist")||!window.HTMLDataListElement)){var e=function(e){var t=e.target;if(t.matches("input[list]")){var i=t.getAttribute("list"),r=document.getElementById(i);if(null!==r){var a=r.getElementsByTagName("select")[0];if(void 0!==a){if(27===e.keyCode)return a.classList.remove("visible"),void a.setAttribute("aria-hidden",!0);var n=r.querySelectorAll("option[value]"),l=t.value,o=document.createDocumentFragment(),s=document.createDocumentFragment(),u=!1;if(""!==l){var d=Array.prototype.slice.call(n),c=!1;d.sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e,t){var i=e.value;""!==i&&-1!==i.toLowerCase().indexOf(l.toLowerCase())&&!1===e.disabled?(e.innerText=i,i===l&&(c=t),o.appendChild(e),u=!0):s.appendChild(e)}),a.appendChild(o),a.selectedIndex=c||0,r.appendChild(s)}a.classList.toggle("visible",u),a.setAttribute("aria-hidden",!u),38!==e.keyCode&&40!==e.keyCode||a.focus()}}}},t=function(r){var a=r.target;if(a.matches("input[list]")){var n=r.type,l=a.getAttribute("list"),o=document.getElementById(l);if(null!==o){var s=o.getElementsByTagName("select")[0],u="focus"===n&&""!==r.target.value||r.relatedTarget&&r.relatedTarget===s,d=o.title;if(void 0===s){var c=a.getClientRects(),p=document.createElement("option");s=document.createElement("select"),s.setAttribute("aria-hidden",!0),s.setAttribute("aria-live","polite"),s.setAttribute("role","listbox"),s.style.marginLeft="-"+c[0].width+"px",s.style.marginTop=c[0].height+"px",s.style.minWidth=c[0].width+"px",p.innerText=d,p.disabled=!0,s.appendChild(p),o.appendChild(s),s.addEventListener("change",i),s.addEventListener("blur",i),s.addEventListener("keyup",i),a.setAttribute("autocomplete","off"),a.setAttribute("role","textbox"),a.setAttribute("aria-haspopup","true"),a.setAttribute("aria-autocomplete","list"),a.setAttribute("aria-owns",l)}switch(s.classList.toggle("visible",u),s.setAttribute("aria-hidden",!u),n){case"focus":a.addEventListener("keyup",e),a.addEventListener("blur",t,!0);break;case"blur":a.removeEventListener("keyup",e),a.removeEventListener("blur",t,!0);break}}}},i=function(e){var t=e.target,i=t.parentNode.title;if(t.matches("select")){var r=e.type,a="keyup"===r&&13!==e.keyCode&&27!==e.keyCode;if("change"===r||"keyup"===r&&13===e.keyCode){var n=t.parentNode.id,l=document.querySelector('input[list="'+n+'"]'),o=t.value;null!==l&&o.length>0&&o!==i&&(l.value=o)}t.classList.toggle("visible",a),t.setAttribute("aria-hidden",!a)}};document.addEventListener("focus",t,!0),Element.prototype.matches||(Element.prototype.matches=Element.prototype.matchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector||Element.prototype.webkitMatchesSelector||function(e){for(var t=(this.document||this.ownerDocument).querySelectorAll(e),i=t.length;--i>=0&&t.item(i)!==this;);return i>-1})}}();

package.json

 {
   "name": "datalist-polyfill",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "An extremely lightweight and library-dependency-free vanilla JavaScript datalist polyfill.",
@@ -5,0 +5,0 @@ "main": "datalist-polyfill.js",

README.md

@@ -56,2 +56,5 @@ # datalist-polyfill
 
+### Version 1.0.3 - 2017/05/09
+better preselection on entries within the dropdown depending on the inputs value
+
 ### Version 1.0.2 - 2017/05/08
@@ -75,2 +78,5 @@ added a package.json file
 	*	Mac OSX 10.7, Safari 6
+*	iOS
+	*	iPad Pro / 10.2, Mobile Safari 10.0
+	*	iPhone 6 Plus / 10.3, Mobile Safari 10.0
 
@@ -77,0 +83,0 @@ ## Outro

No alert changes

Improved metrics

Total package byte prevSize

22698

increased by14.57%

Number of package files

10

increased by25%

Lines of code

230

increased by3.6%

Number of lines in readme file

85

increased by7.59%

No dependency changes