Как добавить слушатель щелчка к клавише ввода?

Question

Я создал код JavaScript, но функция нажатия на кнопку ввода еще не работает, как она может работать?

html

<div class="landing-pages-form-search">
     <input type="text" name="search" id="searchbar" placeholder="Search">
     <input type="submit" onclick="return landingSearch();">
</div>

javascript

    function landingSearch() {
        let input = document.getElementById('searchbar').value
        input = input.toLowerCase();
        let x = document.getElementsByClassName('landing-pages-column');

        for (i = 0; i < x.length; i++) {
            if (!x[i].innerHTML.toLowerCase().includes(input)) {
                x[i].style.display = "none";
                $("#load-more").hide();
            }
            else {
                x[i].style.display = "list-item";
                $("#load-more").hide();
            }
        }
    }

, пожалуйста, помогите мне, где я могу добавить прослушиватель щелчка кода?

Answer 1

Правильный способ использовать входные данные внутри формы и установить ваш обработчик на событие отправки, и он будет работать для щелчка и введите

const form = document.getElementsByClassName('landing-pages-form-search')[0];
form.addEventListener('submit', landingSearch);
function landingSearch(e) {
        e.preventDefault();
        console.log('enter works');
        let input = document.getElementById('searchbar').value
        input = input.toLowerCase();
        let x = document.getElementsByClassName('landing-pages-column');

        for (i = 0; i < x.length; i++) {
            if (!x[i].innerHTML.toLowerCase().includes(input)) {
                x[i].style.display = "none";
                $("#load-more").hide();
            }
            else {
                x[i].style.display = "list-item";
                $("#load-more").hide();
            }
        }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="landing-pages-form-search">
     <input type="text" name="search" id="searchbar" placeholder="Search">
     <input type="submit">
</form>
<div class="landing-pages-column">1</div>
<div class="landing-pages-column">2</div>
<div class="landing-pages-column">3</div>
<div class="landing-pages-column">4</div>
<div class="landing-pages-column">5</div>

Answer 2

Нет необходимости добавлять прослушиватель событий для отправки формы. Вам нужно только обернуть поля ввода в тег формы, и клавиша ввода будет работать автоматически. вот так

<form action="">
 <div class="landing-pages-form-search">
  <input type="text" name="search" id="searchbar" placeholder="Search">
  <input type="submit" onclick="return landingSearch();">
 </div>
</form>

Answer 3

Поместите input и button в form и установите действие формы для страницы, на которую вы хотите отправить данные. Затем подключите JS к событию submit этой формы:

<div class="landing-pages-form-search">
  <form action="#" id="search-form">
    <input type="text" name="search" id="searchbar" placeholder="Search">
    <button type="submit">Submit</button>
  </form>
</div>

let loadMore = document.querySelector('#load-more');

document.querySelector('#search-form').addEventListener('submit', function(e) {
  e.preventDefault();

  let input = (document.querySelector('#searchbar').value || '').toLowerCase();
  let x = document.querySelector('.landing-pages-column');

  for (i = 0; i < x.length; i++) {
    if (!x[i].innerHTML.toLowerCase().includes(input)) {
      x[i].style.display = "none";
      loadMore.style.display = "none";
    } else {
      x[i].style.display = "list-item";
      loadMore.style.display = "none";
    }
  }
});

Обратите внимание на использование ненавязчивого обработчика событий в приведенном выше примере вместо устаревшего атрибута onclick

Answer 4

Вы можете создать функцию и вызвать другую функцию для соответствующего события

$('#searchbar').keypress(function(event) {  // or keydown
   if (event.keyCode == 13) {  // code for Enter
        landingSearch();
    } 
});