Как сделать выпадающий список в input , кроме datalist

Question

Сделал поиск с выпадающим списком datalist , но этот список никак нельзя стилизовать , нужен другой вариант

<input type="text"  list="" placeholder="Города" class="city-filter" id="cityfield"  autocomplete="off" data-list="cityfields">
                <datalist id="cityfields">
                    
                        <option class="label" >москва</option>
<option class="label" >питер</option>
<option class="label" >омск</option>
<option class="label" >минск</option>
<option class="label" >мадрид</option>
<option class="label" >казань</option>

                   
                </datalist>

Answer 1

Наверно лучше использовать из какой-нибудь библиотеки, но если хочется заморочится со своим велосипедом, можно начать по такому принципу (совсем без js не выйдет) и тут нету поиска по найденному но его легко можно реализовать имея весь список городов. С таймаутами нужно играть чтобы выяснить минимум по значению.

const dropInput = document.querySelector('input.drop');
const dropList = document.querySelector('ul.drop');
dropInput.addEventListener('focus', show, false);
dropInput.addEventListener('blur', hide, false);
dropList.addEventListener('click', dropSelect, false);

function hide(){
  setTimeout(() =>
    dropList.classList.remove('visible'),
  300);
}
function show(){
  setTimeout(() =>
    dropList.classList.add('visible'),
  300);  
}

function dropSelect(e) {
  dropInput.value = e.target.textContent
  hide();
}

ul.drop {
  display:none;
  list-style-type: none;
  padding-left: 0;
  border: 1px solid #ddd;
  margin-top: 0;
  width:210px;
}

li {
  margin: 2px;
}

li:hover {
  background: yellow;
}

ul.drop.visible {
  display:block;
}

<input class="drop" type="text">
<ul class="drop">
  <li>москва</li>
  <li>воронеж</li>
  <li>париж</li>
</ul>

БЛОГ НА HUSL

Как сделать выпадающий список в input , кроме datalist

Ответы (1 шт):