Как работать с дополнительным полем?

[nastya97core]

Здравствуйте. Есть поле "регион". Увы у меня нет места для полноценного поля с названием региона, поэтому я пытаюсь как-то выйти из ситуации... Единственное, что пришло в голову - это хранить регион в цифровом варианте. 2 числа уместить в маленький input проще, чем название региона, однако пользователь может не знать цифровое обозначение всех регионов (оказалось, тестировщица в лице мамы не знает даже номера региона, в котором мы живём), поэтому был придуман дополнительный input, где пользователь мог напечатать буквами названия региона и выбрать из выпадающего списка нужный.

То есть при нажатии на input(Регионы), будет открываться ещё один, дополнительный input. И вот здесь начинаются проблемы... Мне не нужно это дополнительное поле, когда я пишу, к примеру, ФИО. То есть он мне нужен только тогда, когда поле "регионы" в фокусе, и если фокус с регионов ушел (допустим просто клик по экрану), то и дополнительное поле уже не нужно. НО переключение на это дополнительное поле как раз и убирает фокус с поля регионы и следовательно убивает это дополнительное поле. Замкнутый круг, короче говоря.

https://jsfiddle.net/nastya97core/76jfszbe/2/

Подскажите, как решить проблему? То есть мне не нужно, чтобы поле пропадало при переключении на него, но пропадало при клике по экрану.

Я не хочу писать костыль, который будет отслеживать все клики (это идиотизм какой-то), поэтому прошу помощи у вас.

[laimas]

оказалось, тестировщица в лице мамы не знает даже номера региона, в котором мы живём

Разве это плохо, почему ваши пользователи обязаны знать "фиктивный номер" своего региона вместо его названия?

[Rise]

nastya97core, datalist не подойдет?

[void()]

<div class="findreg"><input type="text" onblur="displayReg(true)" 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)" >
</div>

function displayReg(s) {
if (s) {
q(".findreg").classList.toggle("show");
}

}