ON INPUT CLICK SHOW DIV

Showing division whe I click on input box and when I selected table row I will get the first table column or anything that I specified and put value into my input box. And when I search using input box, it filter the table row base on the column to be filter I specified.

by Carl Angelo Nievarez

HTML

<script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cs"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<nav class="navbar navbar-default" id="navigation"></nav>
    <div class="container" id="main">
        <input type="text"  class="form-control search " id="product_name" name="product_name" onclick="getshows();" onkeyup="myFunction()"  value="" placeholder="Product Name" autocomplete="off">
        
        <!--//Division Starts Here-->
        <div id="div_product_repo">
            <div class="row">
                <div class="col-lg-12"><span class="fa fa-close pull-right closebtn" onclick="gethide();"></span></div>
                <div class="col-lg-12"></div>
            </div>
            <table class="table table-bordered" id="table" width="100%" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Code</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>PRODUCT 1</td>
                        <td>CUPS1</td>
                        <td>CUP12141</td>
                        <td>1000</td>
                    </tr>
                    <tr>
                        <td>PRODUCT 2</td>
                        <td>CUPS2</td>
                        <td>CUP12142</td>
                        <td>1000</td>
                    </tr>
                    <tr>
                        <td>PRODUCT 3</td>
                        <td>CUPS3</td>
                        <td>CUP12143</td>
                        <td>1000</td>
                    </tr>
                    <tr>
        ...

CSS

#div_product_repo{
        display: none;
        padding: 15px;
        margin-top: 5px;
        border: 1px solid black;
        border-radius: 5px;
    }

    .closebtn {
        cursor: pointer;
        font-size: 20px;
        margin-bottom: 5px;
    }

    td {
        border: 1px #DDD solid; 
        padding: 5px; 
        cursor: pointer;
    }

    .selected {
        background-color: gray;
        color: #FFF;
    }

JavaScript

$("#navigation").load("navigation.html");
    function getshows(){
        document.getElementById("div_product_repo").style.display="block";
    }

    function gethide(){
        document.getElementById("div_product_repo").style.display="none";
    }

    $("#table tbody tr").click(function(){
       $(this).addClass('selected').siblings().removeClass('selected');    
       var value=$(this).find('td:first').html();
       $('#product_name').val(value);  
    });

    $('.ok').on('click', function(e){
        alert($("#table tbody tr.selected td:first").html());
    });

    function myFunction() {
      // Declare variables 
      var input, filter, table, tr, td, i;
      input = document.getElementById("product_name");
      filter = input.value.toUpperCase();
      table = document.getElementById("table");
      tr = table.getElementsByTagName("tr");

      // Loop through all table rows, and hide those who don't match the search query
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0]; //Filter what td value
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
            $('#searchtr').hide();  
          } else {
            tr[i].style.display = "none";     
            $('#searchtr').show();       
          }
        } 
      }
    }