Home How to show Error Message if the search result in a table is not found in Javascript?

Questions

How to show Error Message if the search result in a table is not found in Javascript?

January 5, 2022

So I have created a table using HTML which contains data about the students like name,degree,profession. So to find the information about a particular student there is search bar through which you can find the information about a specific student by just typing the name of that student.

So I am successfully able to retrieve the row of information about that specific student. But if that student is not mentioned in the table I have to show the user a message "Result not found."

I have tried and put the error Message also, but the 1st problem that I am facing is that even after typing the first letter of the student name the error message pops-up , and 2nd problem is that even after writing the right Name which is mentioned in the table still the error message pops-up.
So what I want to achieve is that the error message should only pop-up only if the Name is not mentioned in the table.

let inputValue;
let input = document.getElementById("myInput");

// function that will work when event happens
const search = (e) => {
  inputValue = input.value.toUpperCase();
  // console.log(inputValue);

  let tableEl = document.getElementsByTagName("table");
  let tr = tableEl[0].getElementsByTagName("tr");
  // let th = document.getElementsByTagName("th");
  let th = document.getElementById("header")
  let no_result = document.getElementById("no_result");
  let container = document.querySelector(".container"); // used to access hidden class

  for (let i = 1; i < tr.length; i++) {
    let dataValue = tr[i].getElementsByTagName("td")[0].textContent.toUpperCase(); // Fetching each rows name value
    if (dataValue.includes(inputValue)) {
      console.log(inputValue);
      tr[i].style.display = ""; // Display whole rows details
    }
    else if(inputValue.textContent !== dataValue){
      no_result.style.display="block" 
      tr[i].style.display = "none";
    }
  }
};

input.addEventListener("keyup", function (e) {
  search(e);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  width: 100vw;
  height: 100vh;
  /* display: grid;
  place-items: center; */
  /* margin: 0 auto; */
  /* background-color: black; */
  text-align: center;
  display: flex;
  flex-direction: column;
}

table,
th,
td {
  background-color: rgb(235, 139, 215);
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 20px;
  text-align: center;
  padding: 20px;
  margin: 30px auto;
}

th {
  font-family: "Courier New", Courier, monospace;
}

tr,
td {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

input {
  width: 400px;
  padding: 20px;
  font-size: 20px;
  margin-top: 50px;
  border: 2px solid black;
  outline: none;
}

input:focus {
  outline: 2px solid gray;
}

.hidden {
  display: none;
}
#no_result{
  width: 200px;
  height: 50px;
  align-self: center;
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="main">
      <div>
        <input
          type="text"
          placeholder="Enter your name"
          id="myInput"
        />
      </div>
      <table id="myTable">
        <span id="no_result">
          <h2>No result found!!</h2>
    </span>
  
        <tr id="header">
          <th>Name</th>
          <th>Degree</th>
          <th>Profession</th>
        </tr>
        <tr>
          <td>John</td>
          <td>BSC-IT</td>
          <td>Full stack developer</td>
        </tr>
        <tr>
          <td>Tom</td>
          <td>BSC-IT</td>
          <td>Data Scientist</td>
        </tr>
        <tr>
          <td>Jerry</td>
          <td>Graphic Design</td>
          <td>Graphic Designer and animation</td>
        </tr>
        <tr>
          <td>James</td>
          <td>MCA</td>
          <td>Project Manager</td>
        </tr>
        <tr>
          <td>Roger</td>
          <td>BSC-IT</td>
          <td>Teacher</td>
        </tr>
      </table>
   <div id="error4">

   </div>

      <!-- <div class="container hidden">
        <h1 ">Not found</h1>
      </div> -->
    </div>
 
    
    <script src="script.js"></script>
  </body>
</html>

Below I am mentioning the important parts of my code regarding my problem which are also mentioned in the above snippet
HTML

  <span id="no_result">
              <h2>No result found!!</h2>
        </span>

CSS

#no_result{
  width: 200px;
  height: 50px;
  align-self: center;
  display: none;
}

JAVASCRIPT
Here I have displayed that errorMessage.


  else if(inputValue.textContent !== dataValue){
      no_result.style.display="block" 
      tr[i].style.display = "none";

Help Would be appreciated!!

>Solution :

Here is a simplified script

Note I added thead and tbody and use hidden instead of display

let inputValue;
let input = document.getElementById("myInput");

// function that will work when event happens
const search = (e) => {
  inputValue = input.value.toUpperCase();
  // console.log(inputValue);

  let tableEl = document.querySelector("table tbody");
  let tr = tableEl.querySelectorAll("tr");
  // let th = document.getElementsByTagName("th");
  let th = document.getElementById("header")
  let no_result = document.getElementById("no_result");
  let container = document.querySelector(".container"); // used to access hidden class

  tr.forEach(tr => {  // Fetching each rows name value
    let dataValue = tr.querySelector("td").textContent.toUpperCase(); 
    tr.hidden = !dataValue.includes(inputValue)
  })
  no_result.hidden = tableEl.querySelectorAll("tr[hidden]").length != tr.length;

};

input.addEventListener("keyup", function(e) {
  search(e);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  width: 100vw;
  height: 100vh;
  /* display: grid;
  place-items: center; */
  /* margin: 0 auto; */
  /* background-color: black; */
  text-align: center;
  display: flex;
  flex-direction: column;
}

table,
th,
td {
  background-color: rgb(235, 139, 215);
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 20px;
  text-align: center;
  padding: 20px;
  margin: 30px auto;
}

th {
  font-family: "Courier New", Courier, monospace;
}

tr,
td {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

input {
  width: 400px;
  padding: 20px;
  font-size: 20px;
  margin-top: 50px;
  border: 2px solid black;
  outline: none;
}

input:focus {
  outline: 2px solid gray;
}

#no_result {
  width: 200px;
  height: 50px;
  align-self: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div class="main">
    <div>
      <input type="text" placeholder="Enter your name" id="myInput" autocomplete="off" />
    </div>

    <table id="myTable">
      <thead>
        <tr id="header">
          <th>Name</th>
          <th>Degree</th>
          <th>Profession</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>BSC-IT</td>
          <td>Full stack developer</td>
        </tr>
        <tr>
          <td>Tom</td>
          <td>BSC-IT</td>
          <td>Data Scientist</td>
        </tr>
        <tr>
          <td>Jerry</td>
          <td>Graphic Design</td>
          <td>Graphic Designer and animation</td>
        </tr>
        <tr>
          <td>James</td>
          <td>MCA</td>
          <td>Project Manager</td>
        </tr>
        <tr>
          <td>Roger</td>
          <td>BSC-IT</td>
          <td>Teacher</td>
        </tr>
      </tbody>
    </table><span id="no_result" hidden>
          <h2>No result found!!</h2>
    </span>

    <div id="error4">

    </div>

    <!-- <div class="container hidden">
        <h1 ">Not found</h1>
      </div> -->
  </div>


  <script src="script.js"></script>
</body>

</html>