After creating a table using HTML to display student data like name, degree, and profession, I added a search bar for users to find information on a specific student by typing the student's name. If the student is not in the table, a message "Result not found" is shown.
I've encountered two main issues: Firstly, the error message pops up even after typing just the first letter of the student's name. Secondly, even when entering the correct name listed in the table, the error message still appears.
My goal is for the error message to only appear if the name is not in the table.
let inputValue;
let input = document.getElementById("myInput");
// Function for handling search events
const search = (e) => {
inputValue = input.value.toUpperCase();
let tableEl = document.getElementsByTagName("table");
let tr = tableEl[0].getElementsByTagName("tr");
let th = document.getElementById("header")
let no_result = document.getElementById("no_result");
let container = document.querySelector(".container");
for (let i = 1; i < tr.length; i++) {
let dataValue = tr[i].getElementsByTagName("td")[0].textContent.toUpperCase();
if (dataValue.includes(inputValue)) {
console.log(inputValue);
tr[i].style.display = "";
}
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;
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;
}
#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>Below are key parts from my code regarding the issue mentioned. HTML
<span id="no_result">
<h2>No result found!!</h2>
</span>
CSS
#no_result{
width: 200px;
height: 50px;
align-self: center;
display: none;
}
JAVASCRIPT This part displays the error message.
else if(inputValue.textContent !== dataValue){
no_result.style.display="block"
tr[i].style.display = "none";
I would greatly appreciate any assistance!