Как сделать при вводе в input данных скрытие одного блока и отображения другого (js)

Question

Хочу сделать на js обработчик input, чтоб при вводе данных в input появлялся один блок search-results и скрывался другой chats, а когда данные полностью стерты, чтоб блок chats показывался обратно, a search-results скрывался.

Вот моя попытка сделать это (js):

    const searchDiv = document.querySelector(".search-results");
    searchDiv.style.display = "none";
    const searchInput = document.getElementById("search");
    const chatsContainer = document.querySelector(".chats");
    searchInput.addEventListener("keypress", function (e) {
        //обработка нажатия backspace и delete
        if(e.keyCode == 27 || e.keyCode == 46) {
            if(searchInput.value == ""){
                chatsContainer.style.display = "block";
                searchDiv.style.display = "none";
                return;
            }
        } else {
            //обработка нажатия всех клавиш, кроме пробела
            if(e.keyCode != 0 && e.keyCode != 32){
                chatsContainer.style.display = "none";
                searchDiv.style.display = "block";
            }
        }
    })

Answer 1

Лучше повесить обработчик на событие input и делать trim что бы не искать пробелы

const searchDiv = document.querySelector(".search-results");
searchDiv.style.display = "none";
const searchInput = document.getElementById("search");
const chatsContainer = document.querySelector(".chats");

searchInput.addEventListener('input', function(e) {
    let val = e.target.value.trim();
    if (val.length) {
        searchDiv.style.display = "block";
        chatsContainer.style.display = "none";
    } else {
        searchDiv.style.display = "none";
        chatsContainer.style.display = "block";
    }
});

div{
  width: 100px;
  height: 100px;
}

.chats{
  background: red;
}

.search-results{
  background: green;
}

<div class="chats">
  chat
</div>

<div class="search-results">
  search-results
</div>

<input id="search" placeholder="search">

БЛОГ НА HUSL

Как сделать при вводе в input данных скрытие одного блока и отображения другого (js)

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