<style type="text/css">
  .btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  cursor: pointer;
  width: 100px;
}
.info {
  border-color: #2196F3;
  color: dodgerblue;
}

  /* Green */
.info:hover {
  background: #2196F3;
  color: white;
}
.danger {
  border-color: #f44336;
  color: red;
}

.danger:hover {
  background: #f44336;
  color: white;
}


</style>
<br>
          <input  disabled style="width: 100px; display: none;" class="" id="myInput2" type="text" placeholder="Ref#">

  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  

  <ul class="list-group instore" id="myList" style="display: none;">
          <?php
                    require 'connection.php';

                        $qry = "SELECT * FROM accreg";

             $run = mysqli_query($connect, $qry) or die(mysqli_error($connect));
    while($row = mysqli_fetch_array($run)){
      $id=$row['accid'];
?>
                             
    <li value="<?php echo $id;?>" class="list-group-item"><?php echo $row['accname'];?></li>
      <?php } ?>
   
  </ul> 
  <!-- <label>Select</label>  -->
  <select style="width: auto;" id="period">
    <option value="1">Today</option>
    <option value="2">Yesterday</option>
    <option value="3">Last 7 Days</option>
    <option value="4">This Month</option>
    <option value="5">Last Month</option>

  </select>
  <button id="filtr" class="btn info">Filter</button>
      <button id="clear" class="btn danger">Clear</button>
</div>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    if($("#myInput").val()==""){
      $('#myList').hide();
    }
    else{
      $('#myList').show();

    }
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
<script type="text/javascript">
$("ul.instore li").click( function() {
    var txt = $(this).text();
    var val = $(this).val();
    $('#myInput').val(txt);
    $('#myInput2').val(val);
    $(this).addClass("active").siblings().removeClass("active");
      $('#myList').hide();

});
      </script>

      <script type="text/javascript">
$("#clear").click( function() {
 
    $('#myInput').val("");
    $('#myInput2').val("");

});

      </script>

 