隐藏与类别选择无关的产品（搜索过滤器）

Question

I have a drop down search filter that narrows down the users search by product category, For example if they select burgers, burgers will show.

My search filter works perfectly as its shows the correct products. But even after selecting the category, the categories products show at the top of the page, and all the other products can be seen at the bottom of the page, my question is how would i go around hiding the products that are not in the selected category.

For example only showing the products from burgers and nothing else.

My code for the products page, is on a separate file from the code for the search filter page(getcats.php) , however, they share the exact same query for getting the products. The Search filter page is included in the products page :

Code

Search filter page

   $cats = intval($_GET['cat']);

    $sql = "SELECT * FROM Rest_Category
        INNER JOIN Rest_Details
        ON Rest_Category.CategoryID = Rest_Details.Cat_ID
                    WHERE Rest_Category.CategoryID   = '" . $cats . "'";
    $result = mysqli_query($dbc, $sql);

    while ($row_cats = mysqli_fetch_array($result)) {
     $rest_id = $row_cats['Resturant_ID'];
    $rest_name = $row_cats['Resturant_name'];
   echo '<p>$rest_id</p>' .
        '<p>$rest_name</p>' .;
      }
    }

Products page

function showCat(str) {
if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
} else { 
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET","getcats.php?cat="+str,true);
    xmlhttp.send();
      }
   }

HTML

 <div id="txtHint"><b></b></div>