CODEWITHSUNDEEP
javascriptdom-events
Ahmed Haiba
Ahmed Haiba

Reputation: 79

How to show alert when enter key pressed

I'm trying to get the alert message but it doesn't show at all. It only shows if I deleted (event) from : function myFunction(event).

Can you help me fix it so it can show the alert box when I type less than three letters? Here's the code that I'm stuck with :

function myFunction(input, e) {
  var input, filter, table, tr, td, i;
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  if (filter.length < 3 && e.key === "Enter") {
    alert(
      "Search is going to work only if the phrase contains at least 3 characters."
    );
    return;
  }
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>My Customers</h2>

<input type="text" id="myInput" onkeyup="myFunction(this, event)" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>


</body>
</html>

How can I solve it?

edited: I added the html code to show more about the problem.

Upvotes: 0

Views: 449

Answers (2)

Alex Kudryashev
Alex Kudryashev

Reputation: 9460

See working example.

function myFunction(input, e) {
  var filter, table, tr, td, i;
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (var i = 0, t; t = tr[i]; ++i) {
    if (t.className !== 'header')
      t.style.display = 'none'
  }
  //start search only after Enter pressed
  if (e.key !== 'Enter')
    return;
  //and length >=3
  if (filter.length < 3) {
    alert("Search is going to work only if the phrase contains at least 3 characters.");
    return;
  }
  //continue with search here
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      }
    }
  }

}
<input type="text" id="myInput" onkeyup="myFunction(this, event)" placeholder="Example: Mauro, etc." />
<table id="myTable">
  <tr class="header">
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

Upvotes: 1

Yago Rodriguez
Yago Rodriguez

Reputation: 362

Catch the event and get the keyCode if it is equal to 13 then is the enter key

e.key === 13

Upvotes: 0

Related Questions