JSFiddle - React, Tailwind, and code Playground

by nastya97core

HTML

<div class="findreg"><input type="text" class="regions" placeholder="Поиск номера региона"></div>

<h1>База данных</h1>
<div class="form">
<input type="text" placeholder="Фамилия Имя Отчество" class="fio">
<input type="text" placeholder="Дата рождения" class="date">
<input type="text" placeholder="Регион" class="reg" onfocus="displayReg(true)" onblur="displayReg(false)">
</div>

CSS

body {
  font-family: Helvetica;
}
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 320px;
  font-size: 16px;
}

h1 {
  padding-top: 200px;
}

input {
  box-sizing: border-box;
  height: 50px;
  margin-bottom: 5%;
  padding-left: 10px;
}

.fio {
  width: 100%;
}

.date {
  width: 55%;
}

.reg {
  width: 40%;
}

.autocomplete {
  position: relative;
  display: inline-block;
  z-index: 9998;
}


.autocomplete-items {
border-bottom: none;
    border-top: none;
    z-index: 9999;
    top: 100%;
    left: 0;
    right: 0;
    overflow-y: scroll;
    max-height: 100px;
}

.autocomplete-items div {
    padding: 3% 10%;
    cursor: pointer;
    border-bottom: 1px solid #565656;
    font: 16px sfmed;
    width: 90%;
    box-sizing: border-box;
    margin: 0 auto;
}

.findreg {
  position: fixed;
    visibility: hidden;
    opacity: 0;
    transition: 500ms all ease;
}

.show {
	visibility: visible !important;
	opacity: 1 !important;
}

JavaScript

function q(e){return document.querySelector(e)}
function qs(e){return document.querySelectorAll(e)}

function autocomplete(o,l){var s;function n(e){e&&(function(e){for(var t=0;t<e.length;t++)e[t].classList.remove("autocomplete-active")}(e),s>=e.length&&(s=0),s<0&&(s=e.length-1),e[s].classList.add("autocomplete-active"))}function r(e){for(var t=document.getElementsByClassName("autocomplete-items"),n=0;n<t.length;n++)e!=t[n]&&e!=o&&t[n].parentNode.removeChild(t[n])}o.addEventListener("input",function(e){var t,n,i,a=this.value;if(r(),!a)return!1;for(s=-1,(t=document.createElement("DIV")).setAttribute("id",this.id+"autocomplete-list"),t.setAttribute("class","autocomplete-items"),this.parentNode.appendChild(t),i=0;i<l.length;i++)l[i].substr(0,a.length).toUpperCase()==a.toUpperCase()&&((n=document.createElement("DIV")).innerHTML=l[i],n.innerHTML+="<input type='hidden' value='"+l[i]+"'>",n.addEventListener("click",function(e){o.value=this.getElementsByTagName("input")[0].value;setReg(o.value);r()}),t.appendChild(n))}),o.addEventListener("keydown",function(e){var t=document.getElementById(this.id+"autocomplete-list");t=t&&t.getElementsByTagName("div"),40==e.keyCode?(s++,n(t)):38==e.keyCode?(s--,n(t)):13==e.keyCode&&(e.preventDefault(),-1<s&&t&&t[s].click())}),document.addEventListener("click",function(e){r(e.target)})}

var countries = {"Адыгея": "1","Башкортостан": "2","Бурятия": "3","Алтай": "4","Дагестан": "5","Ингушетия": "6","Кабардино-Балкария": "7","Калмыкия": "8","Карачаево-Черкессия": "9","Карелия": "10", "Коми": "11", "Марий Эл": "12", "Мордовия": "13", "Саха (Якутия)": "14", "Северная Осетия (Алания)": "15", "Татарстан": "16", "Тыва": "17", "Удмуртия": "18", "Хакасия": "19", "Чеченя": "20", "Чувашия": "21", "Алтайский край": "22", "Краснодарский край": "23", "Красноярский край": "24", "Приморский край": "25", "Ставропольский край": "26", "Хабаровский край": "27", "Еврейский АО": "27", "Амурская область": "28", "Архангельская область": "29", "Астраханская...