datalist safari

conexion.php

 <?php
 $servername = "localhost";
 $username = "sec_user";
+//$username = "root";
 $password = "5Qn6g2je6WkF7FX6CcBhAzUf";
+//$password = "PkJXPQFykKLmS3cWhqmZKNYE";
 $dbname = "Escuelas";
 
 // Create connection

index.php

@@ -226,7 +226,7 @@ $conn->close();*/
             }
 
         </script>
-
+<script type="text/javascript" src="js/datalist-polyfill.js"></script>
 </body>
 </html>
 

js/.codacy.yaml

+---
+duplication:
+  enabled: true
+  exclude_paths:
+    - 'tests/functional/dist/**'
+exclude_paths:
+  - 'tests/functional/src/**'
+  - '*.min.js'

js/.editorconfig

+# For more information about the properties used in
+# this file, please see the EditorConfig documentation:
+# https://editorconfig.org/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.js]
+max_line_length = 80
+quote_type = single
+
+[package.json]
+# The indent size used in the `package.json` file cannot be changed
+# https://github.com/npm/npm/pull/3180#issuecomment-16336516
+indent_size = 2
+indent_style = space

js/.gitignore

+
+node_modules/
\ No newline at end of file

js/.gitlab-ci.yml

+dependency_scanning:
+  image: docker:stable
+  variables:
+    DOCKER_DRIVER: overlay2
+  allow_failure: true
+  services:
+    - docker:stable-dind
+  script:
+    - export SP_VERSION=$(echo "$CI_SERVER_VERSION" | sed 's/^\([0-9]*\)\.\([0-9]*\).*/\1-\2-stable/')
+    - docker run
+        --env DEP_SCAN_DISABLE_REMOTE_CHECKS="${DEP_SCAN_DISABLE_REMOTE_CHECKS:-false}"
+        --volume "$PWD:/code"
+        --volume /var/run/docker.sock:/var/run/docker.sock
+        "registry.gitlab.com/gitlab-org/security-products/dependency-scanning:$SP_VERSION" /code
+  artifacts:
+    paths: [gl-dependency-scanning-report.json]

js/LICENSE

+MIT License
+
+Copyright (c) 2017 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

js/_config.yml

+theme: jekyll-theme-cayman
\ No newline at end of file

js/bower.json

+{
+	"name": "datalist-polyfill",
+	"description": "A minimal and dependency-free vanilla JavaScript datalist polyfill. Supports all standard's functionality as well as mimics other browsers behavior.",
+	"version": "1.23.3",
+	"homepage": "https://github.com/mfranzke/datalist-polyfill",
+	"authors": [
+		{
+			"name": "Maximilian Franzke",
+			"url": "https://www.mfranzke.net/",
+			"email": "contact_mfr@nzke.net"
+		}
+	],
+	"keywords": [
+		"datalist",
+		"autosuggest",
+		"autosuggester",
+		"suggest",
+		"suggester",
+		"select"
+	],
+	"licenses": [
+		{
+			"type": "MIT",
+			"url": "https://opensource.org/licenses/mit-license.php"
+		}
+	],
+	"ignore": [
+		"bower.json",
+		"demos/index.html",
+		"demos/ie9/index.html",
+		"readme.md"
+	]
+}

js/datalist-polyfill.min.js

+/*
+ * Datalist polyfill - https://github.com/mfranzke/datalist-polyfill
+ * @license Copyright(c) 2017 by Maximilian Franzke
+ * Supported by Christian, Johannes, @mitchhentges, @mertenhanisch, @ailintom, @Kravimir, @mischah, @hryamzik, @ottoville, @IceCreamYou, @wlekin, @eddr, @beebee1987, @mricherzhagen, @acespace90, @damien-git, @nexces, @Sora2455 and @jscho13 - many thanks for that !
+ */
+!function(){"use strict";var e=window.document,t=window.navigator.userAgent,i="list"in e.createElement("input")&&Boolean(e.createElement("datalist")&&window.HTMLDataListElement),n=Boolean(t.match(/Trident\/[6-7]\./)),a=Boolean(-1!==t.indexOf("Edge/"));if(i&&!n&&!a)return!1;Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector);var r=!1,o=["text","email","number","search","tel","url"];window.addEventListener("touchstart",function e(){r=!0,window.removeEventListener("touchstart",e)});var l,s=window.MutationObserver||window.WebKitMutationObserver;void 0!==s&&(l=new s(function(t){var i=!1;if(t.forEach(function(e){e.target instanceof HTMLElement&&"datalist"===e.target.tagName.toLowerCase()&&e.addedNodes.length>1&&(i=e.target)}),i){var n=e.querySelector('input[list="'+i.id+'"]');""!==f(n)&&A(b(i,n).length,i.getElementsByClassName("polyfilling")[0])}}));var u=function(e){var t=e.target,i=t.list,o=38===e.keyCode||40===e.keyCode;if("input"===t.tagName.toLowerCase()&&null!==i)if(n||a)""===f(t)||o||13===e.keyCode||27===e.keyCode||!n&&"text"!==t.type||(d(t,i),t.focus());else{var l=!1,s=i.getElementsByClassName("polyfilling")[0]||h(t,i);if(27!==e.keyCode&&13!==e.keyCode&&(""!==f(t)||o)&&void 0!==s){b(i,t).length>0&&(l=!0);var u=s.options.length-1;r?s.selectedIndex=0:o&&"number"!==t.getAttribute("type")&&(s.selectedIndex=38===e.keyCode?u:0,s.focus())}A(l,s)}},d=function(e,t){var i=f(e);Array.prototype.slice.call(t.options,0).forEach(function(e){var t=e.getAttribute("data-originalvalue"),n=t||e.value;t||e.setAttribute("data-originalvalue",n),e.label||e.text||(e.label=n),e.value=c(e,i)?i+"###[P0LYFlLLed]###"+n.toLowerCase():n})},p=function(e){var t=e.target,i=t.list;if(t.matches("input[list]")&&t.matches(".polyfilled")&&i){var n=i.querySelector('option[value="'+f(t).replace(/\\([\s\S])|(")/g,"\\$1$2")+'"]');n&&n.getAttribute("data-originalvalue")&&g(t,n.getAttribute("data-originalvalue"))}},c=function(e,t){var i=e.value.toLowerCase(),n=t.toLowerCase(),a=e.getAttribute("label"),r=e.text.toLowerCase();return Boolean(!1===e.disabled&&(""!==i&&-1!==i.indexOf(n)||a&&-1!==a.toLowerCase().indexOf(n)||""!==r&&-1!==r.indexOf(n)))},v=function(e){if(e.target.matches("input[list]")){var t=e.target,i=t.list;if("input"===t.tagName.toLowerCase()&&null!==i){if(t.matches(".polyfilled")||y(t,e.type),a&&"focusin"===e.type){var r=t.list.options[0];r.value=r.value}if(!n&&!a){var o=i.getElementsByClassName("polyfilling")[0]||h(t,i),l=o&&o.querySelector("option:not(:disabled)")&&("focusin"===e.type&&""!==f(t)||e.relatedTarget&&e.relatedTarget===o);A(l,o)}}}},y=function(e,t){e.setAttribute("autocomplete","off"),e.setAttribute("role","textbox"),e.setAttribute("aria-haspopup","true"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("aria-owns",e.getAttribute("list")),"focusin"===t?(e.addEventListener("keyup",u),e.addEventListener("focusout",v,!0),(n||a&&"text"===e.type)&&e.addEventListener("input",p)):"blur"===t&&(e.removeEventListener("keyup",u),e.removeEventListener("focusout",v,!0),(n||a&&"text"===e.type)&&e.removeEventListener("input",p)),e.className+=" polyfilled"},f=function(e){return"email"===e.getAttribute("type")&&null!==e.getAttribute("multiple")?e.value.substring(e.value.lastIndexOf(",")+1):e.value},g=function(e,t){var i;e.value="email"===e.getAttribute("type")&&null!==e.getAttribute("multiple")&&(i=e.value.lastIndexOf(","))>-1?e.value.slice(0,i)+","+t:t};if(e.addEventListener("focusin",v,!0),!n&&!a){var m,b=function(t,i){void 0!==l&&l.disconnect();var n=t.getElementsByClassName("polyfilling")[0]||h(i,t),a=f(i),o=e.createDocumentFragment(),s=e.createDocumentFragment();Array.prototype.slice.call(t.querySelectorAll("option:not(:disabled)")).sort(function(e,t){var n=e.value,a=t.value;return"url"===i.getAttribute("type")&&(n=n.replace(/(^\w+:|^)\/\//,""),a=a.replace(/(^\w+:|^)\/\//,"")),n.localeCompare(a)}).forEach(function(e){var t=e.value,i=e.getAttribute("label"),n=e.text;if(c(e,a)){var r=n.substr(0,t.length+" / ".length);n&&!i&&n!==t&&r!==t+" / "?e.innerText=t+" / "+n:e.text||(e.innerText=i||t),o.appendChild(e)}else s.appendChild(e)}),n.appendChild(o);var u=n.options.length;return n.size=u>10?10:u,n.multiple=!r&&u<2,(t.getElementsByClassName("ie9_fix")[0]||t).appendChild(s),void 0!==l&&l.observe(t,{childList:!0}),n.options},h=function(t,i){if(!(t.getAttribute("type")&&-1===o.indexOf(t.getAttribute("type"))||null===i)){var n=t.getClientRects(),a=window.getComputedStyle(t),l=e.createElement("select");if(l.setAttribute("class","polyfilling"),l.style.position="absolute",A(!1,l),l.setAttribute("tabindex","-1"),l.setAttribute("aria-live","polite"),l.setAttribute("role","listbox"),r||l.setAttribute("aria-multiselectable","false"),"block"===a.getPropertyValue("display"))l.style.marginTop="-"+a.getPropertyValue("margin-bottom");else{var s="rtl"===a.getPropertyValue("direction")?"right":"left";l.style.setProperty("margin-"+s,"-"+(n[0].width+parseFloat(a.getPropertyValue("margin-"+s)))+"px"),l.style.marginTop=parseInt(n[0].height+(t.offsetTop-i.offsetTop),10)+"px"}if(l.style.borderRadius=a.getPropertyValue("border-radius"),l.style.minWidth=n[0].width+"px",r){var u=e.createElement("option");u.innerText=i.title,u.disabled=!0,u.setAttribute("class","message"),l.appendChild(u)}return i.appendChild(l),r?l.addEventListener("change",w):l.addEventListener("click",w),l.addEventListener("blur",w),l.addEventListener("keydown",w),l.addEventListener("keypress",E),l}},E=function(t){var i=t.target,n=i.parentNode,a=e.querySelector('input[list="'+n.id+'"]');"select"===i.tagName.toLowerCase()&&null!==a&&(!t.key||"Backspace"!==t.key&&1!==t.key.length||(a.focus(),"Backspace"===t.key?(a.value=a.value.substr(0,a.value.length-1),C(a)):a.value+=t.key,b(n,a)))},w=function(t){var i=t.currentTarget,n=i.parentNode,a=e.querySelector('input[list="'+n.id+'"]');if("select"===i.tagName.toLowerCase()&&null!==a){var r=t.type,o="keydown"===r&&13!==t.keyCode&&27!==t.keyCode;("change"===r||"click"===r||"keydown"===r&&(13===t.keyCode||"Tab"===t.key))&&i.value.length>0&&i.value!==n.title?(g(a,i.value),C(a),"Tab"!==t.key&&a.focus(),13===t.keyCode&&t.preventDefault(),o=!1):"keydown"===r&&27===t.keyCode&&a.focus(),A(o,i)}},C=function(t){var i;"function"==typeof Event?i=new Event("input",{bubbles:!0}):(i=e.createEvent("Event")).initEvent("input",!0,!1),t.dispatchEvent(i)},A=function(t,i){t?i.removeAttribute("hidden"):i.setAttributeNode(e.createAttribute("hidden")),i.setAttribute("aria-hidden",(!t).toString())};(m=window.HTMLInputElement)&&m.prototype&&void 0===m.prototype.list&&Object.defineProperty(m.prototype,"list",{get:function(){var t=e.getElementById(this.getAttribute("list"));return"object"==typeof this&&this instanceof m&&t&&t.matches("datalist")?t:null}}),function(e){e&&e.prototype&&void 0===e.prototype.options&&Object.defineProperty(e.prototype,"options",{get:function(){return"object"==typeof this&&this instanceof e?this.getElementsByTagName("option"):null}})}(window.HTMLElement)}}();

js/package.json

+{
+  "name": "datalist-polyfill",
+  "version": "1.23.3",
+  "description": "A minimal and dependency-free vanilla JavaScript datalist polyfill. Supports all standard's functionality as well as mimics other browsers behavior.",
+  "main": "datalist-polyfill.js",
+  "scripts": {
+    "test": "xo"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/mfranzke/datalist-polyfill.git"
+  },
+  "author": "Maximilian Franzke",
+  "license": "MIT",
+  "readmeFilename": "README.md",
+  "keywords": [
+    "datalist",
+    "polyfill",
+    "javascript",
+    "html",
+    "autosuggest",
+    "autosuggester",
+    "suggest",
+    "suggester",
+    "select"
+  ],
+  "bugs": {
+    "url": "https://github.com/mfranzke/datalist-polyfill/issues"
+  },
+  "homepage": "https://github.com/mfranzke/datalist-polyfill",
+  "dependencies": {},
+  "devDependencies": {
+    "@wdio/cli": "^5.8.5",
+    "@wdio/dot-reporter": "^5.7.8",
+    "@wdio/local-runner": "^5.8.6",
+    "@wdio/mocha-framework": "^5.8.1",
+    "@wdio/sync": "^5.8.6",
+    "prettier": "^1.13.6",
+    "webdriverio": "^5.8.5",
+    "xo": "^0.24.0"
+  },
+  "xo": {
+    "envs": [
+      "browser"
+    ],
+    "prettier": true,
+    "esnext": false,
+    "rules": {
+      "one-var": 0,
+      "no-use-before-define": 0
+    }
+  }
+}

js/tests/.editorconfig

+# For more information about the properties used in
+# this file, please see the EditorConfig documentation:
+# https://editorconfig.org/
+
+[*.js]
+max_line_length = 120

js/tests/functional/src/input.animal.js

+var field = { fieldId: 'animal', initialValue: 'Ca', expectedAmount: 2, wrongValue: 'Cc' };
+
+// @codekit-append 'tests.js';

js/tests/functional/src/input.animal2.js

+var field = { fieldId: 'animal2', initialValue: 'Ca', expectedAmount: 2, wrongValue: 'Cc' };
+
+// @codekit-append 'tests.js';

js/tests/functional/src/input.email.js

+var field = { fieldId: 'email', initialValue: '@r', expectedAmount: 4, wrongValue: 'doe1' };
+
+// @codekit-append 'tests.js';
+
+/* TODO: The following additional test needs to get fixed as it doesn't work at the moment
+describe('input field #' + field.fieldId + ' - extended', function() {
+	beforeEach(function() {
+		$('#' + field.fieldId).waitForDisplayed(5000);
+
+		// Setting a value within the input field
+		$('#' + field.fieldId).setValue(field.initialValue);
+
+		// Select should be visible
+		assert.ok($('#' + field.fieldId + 'list select').isDisplayed());
+	});
+	it('should provide suggestions after inserting the value "john@doe,moss"', function() {
+		// Setting a value within the input field
+		$('#' + field.fieldId).setValue('john@doe,moss');
+
+
+		// Assert number of results
+		assert.lengthOf($$('#' + field.fieldId + 'list select option:not(:disabled)'), 1);
+
+		// Check for the suggestions value
+		assert.equal(
+			$('#' + field.fieldId + 'list select option:not(:disabled)').getAttribute('value'),
+			'moss.m@reynholm.co.uk'
+		);
+	});
+});
+*/

js/tests/functional/src/input.number.js

+var field = { fieldId: 'number', initialValue: '19', expectedAmount: 28, wrongValue: '99' };
+
+// @codekit-append 'tests.js';

js/tests/functional/src/input.options.js

+var field = { fieldId: 'options', initialValue: ' 1', expectedAmount: 4, wrongValue: 'options' };
+
+// @codekit-append 'tests.js';

js/tests/functional/src/input.search.js

+var field = { fieldId: 'search', initialValue: 'ma', expectedAmount: 2, wrongValue: 'google' };
+
+// @codekit-append 'tests.js';

js/tests/functional/src/input.tel.js

+var field = { fieldId: 'tel', initialValue: '-3', expectedAmount: 6, wrongValue: '911' };
+
+// @codekit-append 'tests.js';

js/tests/functional/src/input.url.js

+var field = { fieldId: 'url', initialValue: '.u', expectedAmount: 3, wrongValue: 'ftp:' };
+
+// @codekit-append 'tests.js';

js/tests/functional/src/tests.js

+/* global browser $ $$ */
+/* eslint-env mocha */
+
+const assert = require('assert');
+
+var keysSelect = [
+	{ keyName: 'ESC', unicodeChars: '\uE00C' },
+	{ keyName: 'ENTER', unicodeChars: '\uE007' },
+	{ keyName: 'BACKSPACE', unicodeChars: '\uE003' },
+	{ keyName: 'TAB', unicodeChars: '\uE004' }
+];
+var keysInput = [{ keyName: 'DOWN', unicodeChars: '\uE015' }, { keyName: 'UP', unicodeChars: '\uE013' }];
+
+browser.url('index.html');
+
+describe('input field #' + field.fieldId, function() {
+	beforeEach(function() {
+		$('#' + field.fieldId).waitForDisplayed(5000);
+
+		// Setting a value within the input field
+		$('#' + field.fieldId).setValue(field.initialValue);
+
+		// Select should be visible
+		assert.ok($('#' + field.fieldId + 'list select').isDisplayed());
+	});
+	it('should provide suggestions after inserting the value "' + field.initialValue + '"', function() {
+		// Assert number of results
+		assert.lengthOf($$('#' + field.fieldId + 'list select option:not(:disabled)'), 1);
+	});
+	it('should not provide suggestions after inserting the value "' + field.wrongValue + '"', function() {
+		// Setting a value within the input field
+		$('#' + field.fieldId).setValue(field.wrongValue);
+
+		// Select should not be visible
+		assert.isNotOk($('#' + field.fieldId + 'list select').isDisplayed());
+
+		// Assert number of results
+		assert.lengthOf($$('#' + field.fieldId + 'list select option:not(:disabled)'), 0);
+	});
+	it(
+		'should provide suggestions after inserting the value "' +
+			field.initialValue +
+			'" and deleting these again bit by bit afterwards',
+		function() {
+			browser.keys('\uE003');
+
+			// Assert number of results
+			assert.lengthOf($$('#' + field.fieldId + 'list select option:not(:disabled)'), field.expectedAmount);
+
+			// Select should be visible
+			assert.ok($('#' + field.fieldId + 'list select').isDisplayed());
+
+			// Setting a value within the input field
+			browser
+				.setValue('#' + field.fieldId, field.initialValue)
+				.keys('\uE003')
+				.keys('\uE003');
+
+			// Select should not be visible
+			assert.isNotOk($('#' + field.fieldId + 'list select').isDisplayed());
+		}
+	);
+	keysInput.forEach(function(actKey) {
+		it('should work with the key "' + actKey.keyName + '"', function() {
+			browser.keys(actKey.unicodeChars);
+
+			// Select should be visible
+			assert.ok($('#' + field.fieldId + 'list select').isDisplayed());
+
+			if (field.fieldId === 'number') {
+				// Check for whether the select has focus
+				assert.isNotOk($('#' + field.fieldId + 'list select').isFocused());
+			} else {
+				// Check for whether the select has focus
+				assert.ok($('#' + field.fieldId + 'list select').isFocused());
+
+				// Check for the selected element
+				var options = $$('#' + field.fieldId + 'list select option:not(:disabled)'),
+					optionsLength = options.length,
+					option = actKey.keyName === 'DOWN' ? options[0] : options[optionsLength - 1];
+
+				assert.ok(option.isSelected());
+			}
+		});
+	});
+
+	if (field.fieldId !== 'number') {
+		keysSelect.forEach(function(actKey) {
+			it('datalists element should work with the key "' + actKey.keyName + '"', function() {
+				var inputInitialValue = $('#' + field.fieldId).isDisplayed('value');
+
+				// Focus the select
+				browser.keys('\uE015');
+
+				// Check for whether the select has focus
+				assert.ok($('#' + field.fieldId + 'list select').isFocused());
+
+				// Press the key to test
+				browser.keys(actKey.unicodeChars);
+
+				// Check for whether the select has focus
+				assert.isNotOk($('#' + field.fieldId + 'list select').isFocused());
+
+				// Check for visibility
+				if (actKey.keyName === 'BACKSPACE') {
+					assert.ok($('#' + field.fieldId + 'list select').isDisplayed());
+				} else {
+					assert.isNotOk($('#' + field.fieldId + 'list select').isDisplayed());
+				}
+
+				// Check for the inputs values
+				switch (actKey.keyName) {
+					case 'ESC':
+						assert.ok($('#' + field.fieldId).getAttribute('value') === inputInitialValue);
+						break;
+					case 'BACKSPACE':
+						assert.ok(
+							$('#' + field.fieldId).getAttribute('value') ===
+								inputInitialValue.substr(0, inputInitialValue.length - 1)
+						);
+						break;
+					default:
+						assert.ok(
+							$('#' + field.fieldId).getAttribute('value') ===
+								$('#' + field.fieldId + 'list select option:checked').getAttribute('value')
+						);
+						break;
+				}
+			});
+		});
+	}
+
+	it('should set the value on clicking on the suggestions select', function() {
+		// Delete the last byte to ensure that there's more than one option/suggestion
+		browser.keys('\uE003');
+
+		// Click the selected element with the suggestions select
+		$('#' + field.fieldId + 'list select').click();
+
+		// Check for whether the select has focus
+		assert.isNotOk($('#' + field.fieldId + 'list select').isFocused());
+
+		// Check for visibility
+		assert.isNotOk($('#' + field.fieldId + 'list select').isDisplayed());
+
+		// Check for the inputs values
+		assert.ok(
+			$('#' + field.fieldId).getAttribute('value') ===
+				$('#' + field.fieldId + 'list select option:checked').getAttribute('value')
+		);
+	});
+});