No Results found in the Search Results-CodePudding

I am trying to display "No Results Found" in the case where someone uses my search feature to search for something that returns no results.

Currently it does not display any text if no results found.

See codepen for my code. I have also attached the code in the question.

https://codepen.io/magic12/pen/ZExKNjY

    function myFunction() {
      const userInput = document.getElementById("myInput").value.toUpperCase();
      const tableRows = document.querySelectorAll("table tr");
      for (let i = 0; i < tableRows.length; i  ) {
        const rowTextContent = tableRows[i].innerText.toUpperCase();
        tableRows[i].style.display = rowTextContent.toUpperCase().includes(userInput) ? "" : "none";
      }
    }

    table.table_brdr td {
        padding: 8px 10px;
        border: none;
    }
    
    table.table_brdr th {
        background-color: #a6a6a6;
        color: black;
    }
    
    tr:nth-of-type(odd) {
          background-color#D3D3D3;
    }
    
    #myInput {
      background-image: url('/css/searchicon.png');
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 20%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }

    <p><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="Searche"></p>
    <table  id="myTable">
    <tr>
    <th>Column1</th>
    <th><strong>Column2</th>
    <th>Column3</th>
    </tr>
    
    <tr>
    <td></td>
    <td>xyz</td>
    <td>03/30/2017</td>
    </tr>
    
    <tr>
    <td>test12</td>
    <td>https://www.yahoo.com/ </td>
    <td>03/30/2017</td>
    </tr>
      
    <tr>
    <th>Column1</th>
    <th> New Column</th>
    <th>Column3</th>
    </tr>
    
    <tr>
    <td>John</td>
    <td>abctd <td>
    <td>09/30/2019</td>
    </tr>
      
    <tr>
    <th>Column1</th>
    <th> New Column2</th>
    <th>Column3</th>
    </tr>
    
    <tr>
    <td>Doe</td>
    <td>abctd </td>
    <td>06/30/2019</td>
    </tr>
    
    </tbody></table>

CodePudding user response：

Something like the solution in the snippet might work.

const searchInput = document.getElementById("myInput")
const inputMessage = document.getElementById("input-message")
searchInput.addEventListener("keyup", myFunction)

function myFunction(e) {
  const userInput = (e.target.value || '').toUpperCase()
  const tableRows = document.querySelectorAll("table tr");
  let count = 0
  for (let i = 0; i < tableRows.length; i  ) {
    const rowTextContent = tableRows[i].innerText.toUpperCase();
    const rowDisplay = rowTextContent.toUpperCase().includes(userInput) ? "" : "none";
    tableRows[i].style.display = rowDisplay
    count  = rowDisplay ? 0 : 1
  }
  setInputMessage(userInput === "" ? "" : count)
}

function setInputMessage(n) {
  let message = "&nbsp;"
  if (typeof n === "number") {
    if (!n) {
      message = "No results found."
    } else {
      message = `${n} result${n === 1 ? "" : "s"} found`
    }
  }
  inputMessage.innerHTML = message
}

table.table_brdr td {
  padding: 8px 10px;
  border: none;
}

table.table_brdr th {
  background-color: #a6a6a6;
  color: black;
}

tr:nth-of-type(odd) {
  background-color#D3D3D3;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 20%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
}

.mb-3 {
  margin-bottom: 12px;
}

<div >
  <input type="text" id="myInput" placeholder="Search" title="Searche">
  <div id="input-message">&nbsp;</div>
</div>
<table  id="myTable">
  <thead>
    <tr>
      <th>Column1</th>
      <th><strong>Column2</th>
      <th>Column3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>xyz</td>
      <td>03/30/2017</td>
    </tr>
    <tr>
      <td>test12</td>
      <td>https://www.yahoo.com/ </td>
      <td>03/30/2017</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Column1</th>
      <th>New Column</th>
      <th>Column3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>abctd</td>
      <td>09/30/2019</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Column1</th>
      <th> New Column2</th>
      <th>Column3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Doe</td>
      <td>abctd </td>
      <td>06/30/2019</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

A quick and simply way is create an empty div for the message, and just have a counter adding up matching results. Then have an if statement if that variable is 0. There are other ways that use less code but harder to understand array functions, this is clean and simple. Also, you can move the table and new errors variables outside of the function.

  const tableRows = document.querySelectorAll("table tr");
  let errors = document.querySelector(".errors");

function myFunction() {
  const userInput = document.getElementById("myInput").value.toUpperCase();


  errors.innerHTML = "";
  let found = 0;
  
  for (let i = 0; i < tableRows.length; i  ) {
    const rowTextContent = tableRows[i].innerText.toUpperCase();
    if(rowTextContent.toUpperCase().includes(userInput)){
      found   ;
      tableRows[i].style.display ="block";
    }
    else{
       tableRows[i].style.display ="none";
    }
  }
  
  if(found == 0){
    errors.innerHTML = "NO RESULTS FOUND";
  }
  
}

table.table_brdr td {
  padding: 8px 10px;
  border: none;
}

table.table_brdr th {
  background-color: #a6a6a6;
  color: black;
}

tr:nth-of-type(odd) {
  background-color#D3D3D3;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 20%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

<p><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="Searche"></p>

<div ></div>

<table  id="myTable">
  <tr>
    <th>Column1</th>
    <th><strong>Column2</strong></th>
    <th>Column3</th>
    </tr>
    
    <tr>
    <td></td>
    <td>xyz</td>
    <td>03/30/2017</td>
    </tr>
    
    <tr>
    <td>test12</td>
    <td>https://www.yahoo.com/ </td>
    <td>03/30/2017</td>
    </tr>
      
    <tr>
    <th>Column1</th>
    <th> New Column</th>
    <th>Column3</th>
    </tr>
    
    <tr>
    <td>John</td>
    <td>abctd <td>
    <td>09/30/2019</td>
    </tr>
      
    <tr>
    <th>Column1</th>
    <th> New Column2</th>
    <th>Column3</th>
    </tr>
    
    <tr>
    <td>Doe</td>
    <td>abctd </td>
    <td>06/30/2019</td>
    </tr>
    
    </tbody></table>