title: How to make search bar using js
body: <p>WHAT I WANT TO DO : I want to make a search bar for my table using js.</p>
  
  <p>WHAT I HAVE : I have a html table having data from database .</p>
  
  <p>WHAT I TRY : I tried this code to retrieve result but its not working. Here is my full code:</p>
  
  <pre><code>&lt;div class="box-tools"&gt;
  
                  &lt;div class="input-group input-group-sm" style="width: 150px;"&gt;
                      &lt;input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"&gt;
  
  
                  &lt;/div&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- /.box-header --&gt;
              &lt;div class="box-body table-responsive no-padding"&gt;
                &lt;table class="table table-hover" id="myTable"&gt;
                  &lt;tbody&gt;&lt;tr&gt;
                    &lt;th style="width: 10px"&gt;ID&lt;/th&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                    &lt;th&gt;Image&lt;/th&gt;
                    &lt;th style="width: 40px"&gt;Action&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;?php foreach($check as $row)
                   {?&gt;
                  &lt;tr&gt;
  
  
                    &lt;td&gt;&lt;?php echo $row['cat_id'];?&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;?php echo $row['category_name'];?&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;img src="&lt;?php echo $row['category_image'];?&gt;" height="100" width="100"&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;a href="editcategory.php?id=&lt;?php echo base64_encode($row['cat_id']);?&gt;"&gt;&lt;button class=" btn btn-primary btn-warning" &gt;Edit&lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;
                    &lt;td&gt;&lt;a href="deletecategory.php?id=&lt;?php echo base64_encode($row['cat_id']);?&gt;" class="btn btn-social-icon btn-google"&gt;&lt;i class="fa fa fa-trash-o"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;?php  } ?&gt;
                  &lt;/tr&gt;
                &lt;/tbody&gt;&lt;/table&gt;
              &lt;/div&gt;
              &lt;!-- /.box-body --&gt;
            &lt;/div&gt;
            &lt;script&gt;
  function myFunction() {
    var input, filter, table, tr, td, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i &lt; tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[0];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }       
    }
  }
  &lt;/script&gt;
  
  
            &lt;/section&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>When I try to search it gives me empty results. </p>