Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Search Submit on Pressing Enter

I’m trying to get my search bar to work when pressing enter. It works when pressing the button but not when you press enter….

/**
 * search toggle
 */

const searchTogglers = document.querySelectorAll("[data-search-toggler]");
const searchBox = document.querySelector("[data-search-box]");

for (let i = 0; i < searchTogglers.length; i++) {
  searchTogglers[i].addEventListener("click", function () {
    searchBox.classList.toggle("active");
  });
}
<div class="search-container" data-search-box>
    <div class="input-wrapper">
      <input type="search" id="search" autocomplete="off"  aria-label="search" placeholder="Search here..." class="search-field">
    <button class="search-submit" type="submit" id="button" onclick="openPage(event)" value="Chercher" aria-label="submit search" data-search-toggler>
        <ion-icon name="search-outline"></ion-icon>
      </button>
      <button class="search-close" aria-label="close search" data-search-toggler></button>
    </div>
  </div>
Tags:

2

Answers


  1. 0

    Just wrap in a form element

    document.getElementById("searchForm").addEventListener("submit", (e) => {
  e.preventDefault();
  console.log(document.getElementById("search").value)
})
    <div class="search-container" data-search-box>
  <form id="searchForm">
    <div class="input-wrapper">
      <input type="search" id="search" autocomplete="off" aria-label="search" placeholder="Search here..." class="search-field">
      <button class="search-submit" type="submit" id="button" value="Chercher" aria-label="submit search" data-search-toggler>
        <ion-icon name="search-outline">Search</ion-icon>
      </button>
      <button type="button" class="search-close" aria-label="close search" data-search-toggler>Close</button>
    </div>
  </form>
</div>
    Login or Signup to reply.
  2. 0

    Use Keypress event on searchbox.

    /**
 * search toggle
 */

const searchTogglers = document.querySelectorAll("[data-search-toggler]");
const searchBox = document.querySelector("[data-search-box]");

for (let i = 0; i < searchTogglers.length; i++) {
  searchTogglers[i].addEventListener("click", function () {
    searchBox.classList.toggle("active");
  });
}
searchBox.addEventListener("keypress", function (e) {
  if(e.key === 'Enter'){
     console.log('Search :',e.target.value);
  }
});
    <div class="search-container" data-search-box>
    <div class="input-wrapper">
      <input type="search" id="search" autocomplete="off"  aria-label="search" placeholder="Search here..." class="search-field">
    <button class="search-submit" type="submit" id="button" onclick="openPage(event)" value="Chercher" aria-label="submit search" data-search-toggler>
        <ion-icon name="search-outline"></ion-icon>
      </button>
      <button class="search-close" aria-label="close search" data-search-toggler></button>
    </div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search