How to hide the all the content until the user searches for a specific item in this table?

Question

I want to create a table with hidden contents from the user but is available if they typed the specific items. So, basically, I just want to have a search bar as the only thing displayed.

Here is what I already have, and this is from w3schools:





  
  




  My Customers

  

  
    
      Name
      Country
    
    
      Alfreds Futterkiste
      Germany
    
    
      Berglunds snabbkop
      Sweden
    
    
      Island Trading
      UK
    
    
      Koniglich Essen
      Germany
    
    
      Laughing Bacchus Winecellars
      Canada
    
    
      Magazzini Alimentari Riuniti
      Italy
    
    
      North/South
      UK
    
    
      Paris specialites
      France

And lastly, how would I be able to add a clickable link on an item? I've seen a website with those features and I tried to find the answer on my own but can't. I'm also a beginner and have zero background in coding, although I've learned quite fast these past few weeks. So I would appreciate it if you use will use words I can understand.

If you want to know what I'm gonna do with this is I'm planning to build a free books blog where people can just search their favorite author or book title and it will appear on the search bar if it's available. Thanks a lot!

blex · Accepted Answer

Here is how I would do it. I tried adding as many comments as I could to explain why I did some things. There are some in the HTML, the CSS, and the JS code. Feel free to ask any question.

// When the DOM (HTML structure) is ready
document.addEventListener("DOMContentLoaded", function() {
  // First, we can create references to DOM elements on page start,
  // which we'll reuse instead of looking them up every time we perform a search.
  // As a convention, I like variables holding DOM elements to start with $,
  // so that I know what I'm dealing with in the blink of an eye 👀
  var $input = document.getElementById("myInput"),
      $table = document.getElementById("myTable"),
      // Only select the s inside the  (double $ -> multiple elements)
      $$tr   = $table.querySelectorAll("tbody tr");

  // Add the normalized name as a property to each tr, so that you don't have
  // to compute that every time when performing a search
  for (var i = 0; i < $$tr.length; i++) {
    $$tr[i].normalizedValue = normalizeStr( $$tr[i].querySelector("td").innerText );
  }
  // When typing or pasting text, perform a search
  $input.addEventListener("input", performSearch);

  function performSearch() {
    var filter = normalizeStr(this.value);
    for (var i = 0; i < $$tr.length; i++) {
      var isMatch = $$tr[i].normalizedValue.includes(filter);
      // Toggle a 'visible' class
      $$tr[i].classList[isMatch ? "add" : "remove"]("visible");
    }
  }

  // Creating a reusable function will allow us to make
  // changes to it only in one place 👍
  function normalizeStr(str) {
    return str.toUpperCase().trim();
  }
});

/* ... untouched CSS ... */ *{box-sizing:border-box}#myInput{background-image:url(/css/searchicon.png);background-position:10px 10px;background-repeat:no-repeat;width:100%;font-size:16px;padding:12px 20px 12px 40px;border:1px solid #ddd;margin-bottom:12px}#myTable{border-collapse:collapse;width:100%;border:1px solid #ddd;font-size:18px}#myTable td,#myTable th{text-align:left;padding:12px}#myTable tr{border-bottom:1px solid #ddd}

#myTable thead tr, /* notice the use of thead */
#myTable tr:hover {
  background-color: #f1f1f1;
}

#myTable tbody tr {
  display: none; /* Hide rows by default */
}

#myTable tbody tr.visible {
  display: table-row; /* Show them when they match */
}

My Customers





  
  
    
      Name
      Country
    
  
  
     Alfreds Futterkiste  Germany  
     Berglunds snabbkop  Sweden  
     Island Trading  UK  
     Koniglich Essen  Germany  
     Laughing Bacchus Winecellars  Canada  
     Magazzini Alimentari Riuniti  Italy  
     North/South  UK  
     Paris specialites  France

How to hide the all the content until the user searches for a specific item in this table?

Answers (2)

Related Questions