How do I turn this code from jQuery to Vanilla Javascipt?

Question

I'm creating a webpage(e-commerce) and I'm trying to put a search bar with autocomplete suggestions and this is my original code with jQuery:

<script>  
 $(document).ready(function(){  
      $('#products').keyup(function(){  
           var query = $(this).val();  var query = document.querySelectorAll(this).val();
           if(query != '')  
           {  
                $.ajax({  
                     url:"search.php",  
                     method:"POST",  
                     data:{query:query},  
                     success:function(data)  
                     {  
                          $('#productlist').fadeIn();  //
                          $('#productlist').html(data);  
                     }  
                });  
           }  
      });  
      $(document).on('click', 'li', function(){  
           $('#products').val($(this).text());  
           $('#productlist').fadeOut();  
      });  
 });  
 $('#products').keyup(function() {
  if($('#products').val() === '') {
     $('#productlist').hide();
  }
});
</script>

I'm trying not to use any framework so I wanted to turn the code stated above to vanilla javascript and this is the code I currently have right now:

<script>
     
      document.querySelector(document).ready(function(){  
      document.querySelectorAll(".products").keyup(function()
      {  
           var query = document.querySelectorAll(this).value();
           if(query != '')  
           {  
                fetch("search.php")
                .then((response))=>response.json())
                .then(data)=> console.log(data));
            
           });  
           
      }  
      
     });  
     
           element.addEventListener("click", function (){ console.log("clicked");}); 
           document.querySelector(document).addEventListener('click', 'li', function(){  
           document.querySelector('#products').val(document.querySelector(this).text());  
           document.querySelector('#productlist').fadeOut();  
      });  


</script>