JSFiddle - React, Tailwind, and code Playground

by Geoapify

HTML

<div class="autocomplete-container" id="autocomplete-container"></div>

CSS

body {
  font: 16px;
  background: #f3f5f6;
}

.autocomplete-container {
  /*the container must be positioned relative:*/
  position: relative;
}

.autocomplete-container input {
  width: calc(100% - 43px);
  outline: none;
  
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px;
  padding-right: 31px;
  font-size: 16px;
}

JavaScript

/* 
	The addressAutocomplete takes a container element (div) as a parameter
*/
function addressAutocomplete(containerElement) {
  // create input element
  var inputElement = document.createElement("input");
  inputElement.setAttribute("type", "text");
  inputElement.setAttribute("placeholder", "Enter an address here");
  containerElement.appendChild(inputElement);
}

addressAutocomplete(document.getElementById("autocomplete-container"));