<?php 
  if (!isset($_SESSION['username'])) {
    $_SESSION['msg'] = "To access this page, Login is required";
    header('location: login.php');
  }  ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{  font-family: Arail, sans-serif; }

.t2 td {  padding:8px;border-bottom: 1px solid #ddd !important; font-size: xx-small; }

.t2 th {  padding:10px;border: 1px solid #ddd !important; background:none; color: #7CB9E8; opacity: .8;text-align: left;  font-size: x-small;
 border-spacing: 1; border: 1px solid gray;}

.t2 table { margin: auto; border-spacing: 1; width: 100%; float: left; border-collapse: none;  }

.product-image { float: left; width: 70%; height: 3em; }
.btn-edit a { text-decoration: none; color:green ; }
.btn-offer a { text-decoration: none; color:#7CB9E8 ; }
.btn-delete a { text-decoration: none; color:red; }

    .search-box{ width: 100%;    position: relative;    display: inline-block;    font-size: 14px;     }
    .search-box input[type="text"]{ font-size: x-small;  padding: 10px;  border-radius: 5px;  border: 1px solid #CCCCCC; margin-bottom: 2%; }
    .result{    position: relative;   z-index: 999;   top: 100%;     left: 0;  }
    .search-box input[type="text"], .result{   width: 100%;   box-sizing: border-box;  }
    .no-results { color: red; font-style: italic;  margin-left: 3%;}

</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("search-6.php", {term: inputVal}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });

    // Set search input value on click of result item
    $(document).on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>
</head>
<body>
    <div class="search-box">
        <input type="text" autocomplete="on" placeholder="Search item by name..." />
        <div class="result"></div>
    </div>
</body>
</html>

