Как сделать, чтобы datalist открывался только после ввода 3 символов

Question

Нужно ,чтоб когда в input вводишь минимум три символа только тогда открывается datalist

<input type="text"  list="cityfields" placeholder="Найти" class="city-filter" id="cityfield"  autocomplete="off">
                <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>
                              <option class="label" >стул</option>
                    
                </datalist>

Answer 1

document.getElementById('cityfield').addEventListener('input', function (evt) {
    if (this.value.length === 3)
        console.log(this.value); // тут ваш код
});

<input type="text" list="cityfields" placeholder="Найти" class="city-filter" id="cityfield" autocomplete="off">
<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>
    <option class="label" >стул</option>
</datalist>

Как вариант (я дополнил инпут дата атрибутом data-list="cityfields"):

document.getElementById('cityfield').addEventListener('input', (el) => {
    let input = el.target;    
    let datalist = input.getAttribute('data-list');
    
    if (input.value.length < 3) {
        input.setAttribute('list', '');
    } else {
        input.setAttribute('list', 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>
    <option class="label" >стул</option>
    <option class="label" >солярис</option>
    <option class="label" >соль</option>
    <option class="label" >мореход</option>
</datalist>

БЛОГ НА HUSL

Как сделать, чтобы datalist открывался только после ввода 3 символов

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