// Reference <input type="search">
const srch = document.querySelector("#search");
// Reference <output>
const msgs = document.querySelector("#message");
// Gather all <tr> into a NodeList
const rows = document.querySelectorAll("tr");

/**
 * This event handler matches the text to the text of each
 * <tr> while the user is typing.
 * @param {object} e - Event object
 */
const findTerm = e => {
  // Convert search term to lower case
  let term = e.target.value.toLowerCase();
  // Iterate through the <tr>
  rows.forEach(tr => {
    // On each <tr> convert it's text to lower case
    let text = tr.textContent.toLowerCase();
    // If a match is found...
    if (text.includes(term)) {
      // remove the .hidden class from <tr>...
      tr.classList.remove("hidden");
      // otherwise add the .hidden class to <tr>
    } else {
      tr.classList.add("hidden");
    }
  });
  // Get the amount of tr.hidden
  let hid = document.querySelectorAll(".hidden").length;
  /* 
    If there at least one tr.hidden, display a message 
    announcing the totals, otherwise display nothing.
  */
  msgs.value = hid > 0 ? `${rows.length - hid} 
  out of ${rows.length} matched the term: "${term}"` : "";
};
/*
  Register input#search to the "input" event.
  Registering it to the "change" and "click" events is
  pointless, "input" event covers what "change" and 
  "click" does as well.
*/
srch.addEventListener("input", findTerm);
  

:root {
  font: 2ch/1.2 "Segoe UI"
}

table,
td {
  margin: 5px auto;
  border: 2px solid #000;
  text-align: center;
}

input, 
output {
  display: block;
  height: 1.5rem;
  margin: 5px auto;
  font: inherit;
  text-align: center;
}

.hidden {
  visibility: collapse;
}

<input id="search" type="search">
<output id="message"></output>
<table>
<tbody><tr><td>Microsoft</td></tr><tr><td> Google</td></tr><tr><td> Apple</td></tr><tr><td> Amazon</td></tr><tr><td> Facebook</td></tr><tr><td> Netflix</td></tr><tr><td> Adobe</td></tr><tr><td> Salesforce</td></tr><tr><td> Oracle</td></tr><tr><td> IBM</td></tr><tr><td> Intel</td></tr><tr><td> Cisco</td></tr><tr><td> HP</td></tr><tr><td> Dell</td></tr><tr><td> VMware</td></tr><tr><td> Twitter</td></tr><tr><td> Uber</td></tr><tr><td> Airbnb</td></tr><tr><td> Dropbox</td></tr><tr><td> Slack</td></tr><tr><td> Tesla</td></tr><tr><td> SpaceX</td></tr><tr><td> Reddit</td></tr><tr><td> Pinterest</td></tr><tr><td> Zoom</td></tr><tr><td> Shopify</td></tr><tr><td> Square</td></tr><tr><td> PayPal</td></tr><tr><td> LinkedIn</td></tr><tr><td> Etsy</td></tr></tbody></table>

const trs = document.getElementById("myTable").getElementsByTagName("tr")
document.getElementById("search").addEventListener("input", filterRows)
document.getElementById("search").addEventListener("change", filterRows)
document.getElementById("search").addEventListener("click", filterRows)

function filterRows(e) {
  let counter = 0;
  const query = e.target.value.toLowerCase()
  for (const tr of trs) {
    counter++;
    tr.style.display = tr.innerText.toLowerCase().includes(query) ? "" : "none"
  }
  
  document.querySelector("#output").innerText = counter;
}

let tableHNDL=document.querySelector("#myTable");
document.getElementById("searchValue").addEventListener("input", filterRows);
document.getElementById("selectOptionList").addEventListener("change", filterRows);
document.getElementById("searchBTN").addEventListener("click", filterRows);

function filterRows(e) {
    let searchFor=e.target.value.toLowerCase(); // gets the elements value. selectOption & textbox & button.
    //let searchFor=document.querySelector("#searchValue").value;
    let rowsFound=0;

for(let a=0;a<tableHNDL.rows.length;a++){
for(let b=0;b<tableHNDL.rows[a].cells.length;b++){
if(tableHNDL.rows[a].cells[b].innerHTML.toLowerCase()==searchFor)
{tableHNDL.rows[a].style.display="block";rowsFound++;break;}
else
{tableHNDL.rows[a].style.display="none";}
}
}

let rs=document.querySelector("#resultCount");
if(rowsFound){rs.innerHTML=rowsFound+" rows found.";}else{rs.innerHTML="Nothing found.";}

}

<table border="1" id="myTable">
<tr><td>a1</td><td>b1</td><td>c1</td></tr>
<tr><td>a2</td><td>b2</td><td>c2</td></tr>
<tr><td>a3</td><td>b4</td><td>c3</td></tr>
<tr><td>a4</td><td>b4</td><td>c4</td></tr>
</table>

<select id="selectOptionList">
<option value="c4">c4</option>
<option value="a2">a2</option>
<option value="b1">b1</option>
<option value="c3">c3</option>
</select>

<input id="searchValue" type="text"/>

<input id="searchBTN" type="button" value="a2"/>

<div id="resultCount"></div>