autocomplete addresses

content/index.html

@@ -25,11 +25,19 @@
 			href="static/fonts/open-sans/style.css"
 		>
 
+		<link
+			rel="stylesheet"
+			href="static/css/geo-autocomplete.css"
+		>
 		<link
 			rel="stylesheet"
 			href="static/css/base.css"
 		>
 
+		<script
+			src="static/js/geo-autocomplete.min.js"
+		></script>
+
 		<link
 			rel="icon"
 			href="static/images/favicon.webp"
@@ -81,18 +89,34 @@
 							>
 						</div>
 						
+						<br>
+						
+						<div
+							id="address-autocomplete"
+							aria-role="textbox"
+							class="autocomplete-container"
+						></div>
+						
 						<input
 							type="text"
 							id="street"
-							placeholder="Ulice, č.p. *"
+							placeholder="Ulice, popisné a orientační č. *"
 						>
 						
+						<div class="input-group input-group-2">
 							<input
 								type="text"
 								id="city"
 								placeholder="Obec *"
 							>
 							
+							<input
+								type="text"
+								id="zip"
+								placeholder="PSČ *"
+							>
+						</div>
+						
 						<select
 							id="receiving-type"
 						>
@@ -102,6 +126,13 @@
 							<option>Zaslat jinam</option>
 						</select>
 						
+						<select
+							id="card-type"
+						>
+							<option>1. kolo</option>
+							<option>2. kolo</option>
+						</select>
+						
 						<button>
 							Vydat žádost úřadu!
 						</button>
@@ -121,5 +152,9 @@
 		<footer>
 			
 		</footer>
+
+		<script
+			src="static/js/main.js"
+		></script>
 	</body>
 </html>

content/static/css/base.css

@@ -26,17 +26,16 @@ main {
 
 
 input,[aria-role="input"],textarea,select {
-	border:2px solid #000;
-	border-radius:9px;
+	border:0;
 	font-size:unset;
 	padding:10px;
-	font-family:"Open Sans",sans-serif
+	font-family:"Open Sans",sans-serif;
+	background: #dddcdc;
 }
 
 button,input[type="submit"],[aria-role="button"] {
-	background:#000;
+	background:#2f2f2f;
 	border:none;
-	border-radius:9px;
 	color:#fff;
 	cursor:pointer;
 	display:inline-block;
@@ -91,6 +90,10 @@ textarea {
 	gap:14px
 }
 
+#address-autocomplete {
+	position:relative
+}
+
 #form-preview {
 	grid-area:preview
 }
@@ -121,3 +124,11 @@ textarea {
 .input-single-with-label input {
 	flex:1 1 0px
 }
+
+.geoapify-autocomplete-input {
+	border:0;
+	font-size:medium;
+	height:42px;
+	line-height:42px;
+	width:100%
+}

content/static/css/geo-autocomplete.css

+.geoapify-autocomplete-input {
+    padding: 0 31px 0 7px;
+    width: calc(100% - 40px);
+
+    outline: none;
+
+    line-height: 36px;
+    height: 36px;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+
+    font-size: 14px;
+}
+
+.geoapify-autocomplete-items {
+    position: absolute;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-top: none;
+    background-color: #fff;
+    
+    z-index: 99;
+    top: 100%;
+    left: 0;
+    right: 0;
+}
+
+.geoapify-autocomplete-items div {
+    padding: 10px;
+    cursor: pointer;
+}
+
+.geoapify-autocomplete-items div:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.geoapify-autocomplete-items .active {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.geoapify-autocomplete-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.geoapify-autocomplete-item .icon {
+    display: inline-block;
+    width: 40px;
+    height: 24px;
+    color: #aaa;
+}
+
+.geoapify-autocomplete-item .icon.emoji {
+    color: unset;
+    font-size: 20px;
+    opacity: 0.9;
+}
+
+.geoapify-close-button {
+    position: absolute;
+    right: 5px;
+    top: 0;
+
+    height: 100%;
+    display: none;
+    align-items: center;
+}
+
+.geoapify-close-button.visible {
+    display: flex;
+}
+
+.geoapify-close-button {
+    color: rgba(0, 0, 0, 0.4);
+    cursor: pointer;
+}
+
+.geoapify-close-button:hover {
+    color: rgba(0, 0, 0, 0.6);
+}
+
+.geoapify-autocomplete-items .main-part .non-verified {
+    color:  #ff4848;
+}
+
+.geoapify-autocomplete-items .secondary-part {
+    margin-left: 10px;
+    font-size: small;
+    color: rgba(0, 0, 0, 0.6);
+}

content/static/js/main.js

+const AUTOCOMPLETE_API_KEY = "a17b542575f34d8795f90a23d650349f";
+
+window.onload = () => {
+	const autocompleteWidget = new autocomplete.GeocoderAutocomplete(
+		document.getElementById("address-autocomplete"), 
+		AUTOCOMPLETE_API_KEY,
+		{
+			"lang": "cs",
+			"filter": {
+				"countrycode": ["cz"]
+			},
+			"placeholder": "Vyhledat adresu..."
+		}
+	);
+
+	autocompleteWidget.on(
+		"select",
+		(location) => {
+			const properties = location.properties;
+			
+			document.getElementById("street").value = (
+				properties.street
+				+ (
+					(
+						properties.street !== null
+						&& properties.street !== ""
+					) ?
+					" " : ""
+				) // In case the user does not have a street name
+				+ properties.housenumber
+			);
+			document.getElementById("city").value = properties.city;
+			document.getElementById("zip").value = properties.postcode;
+		}
+	);
+}