performing a search on enter?

Question

I have this form:

<form>
  <label for="locationsearch">Location:</label>
  <input type="search" id="locationsearch" name="locationsearch" />
</form>

I want to add an eventListener when I hit enter on the input(i.e. #locationsearch). I tried doing this:

const locationSearch = document.getElementById("locationsearch");
    locationSearch.addEventListener("search", () => {
      console.log("search entered");
    });

and this:

const locationSearch = document.getElementById("locationsearch");
locationSearch.onsubmit = function () {
  console.log("search entered");
};

Both are not console-logging.

What is the correct/better way to perform this action?

Answer 1

The onsubmit event would happen on the form itself, not the input. So you could use an id on the form instead to target it directly.

const locationSearch = document.getElementById("locationsearch");
locationSearch.onsubmit = function () {
  console.log("search entered");
};

<form id="locationsearch">
  <label for="locationsearch">Location:</label>
  <input type="search" name="locationsearch" />
</form>

Answer 2

You could handle it keydown event handler of input element. And check the key code if Enter key pressed.

const locationSearch = document.getElementById("locationsearch");
locationSearch.addEventListener("keydown", (e) => {
  if (e.code === 'Enter') {
     // Do Something ? Search
  }
});

Answer 3

You can use keypress event for this.

const locationSearch = document.getElementById("locationsearch");
    locationSearch.addEventListener("keypress", () => {
      if (event.key === "Enter") {
    event.preventDefault();
    let inputVal = document.getElementById("locationsearch").value;
    console.log("search entered "+inputVal);
    document.getElementById("locationsearch").value = "";
  }
});

<form>
  <label for="locationsearch">Location:</label>
  <input type="search" id="locationsearch" name="locationsearch" />
</form>