实时搜索PHP和JavaScript

Question

我对产品搜索代码有疑问。我正在尝试使用php和ajax对我的所有产品进行实时搜索。我不使用任何cms或插件，代码是手动编写的。

我尝试使用此代码，但它向我显示了一个单独的下拉列表（参见图片）。

    <table class="table table-bordered">
       <thead>
     <tr>
         <th class="text-center" style="width: 10%;"> Slika</th>
         <th class="text-center" style="width: 10%;"> Ime producta </th>
         <th class="text-center" style="width: 10%;"> Kategorija </th>
         <th class="text-center" style="width: 10%;"> Zemun </th>
         <th class="text-center" style="width: 10%;"> Balkanska </th>
         <th class="text-center" style="width: 10%;"> Novi Sad </th>
         <th class="text-center" style="width: 10%;"> Bulevar </th>
         <th class="text-center" style="width: 10%;"> Piramida </th>
         <th class="text-center" style="width: 10%;"> Datum dodavanja</th>
     </tr>
       </thead>

      <tbody>

     <?php foreach ($products as $product):?>

       <tr>          
    <td> <?php echo remove_junk($product['image']); ?></td>             
    <td> <?php echo remove_junk($product['name']); ?></td>
    <td> <?php echo remove_junk($product['categorie']); ?></td>
    <td> <?php echo remove_junk($product['zemun']); ?></td>
    <td> <?php echo remove_junk($product['balkanska']); ?></td>
    <td> <?php echo remove_junk($product['novi_sad']); ?></td>
    <td> <?php echo remove_junk($product['bulevar']); ?></td>
    <td> <?php echo remove_junk($product['piramida']); ?></td>
    <td> <?php echo read_date($product['date']); ?></td>
       </tr>

     <?php endforeach; ?>
      </tbody>
    </table>