Javascript 如何将这段代码从jQuery转换为Vanilla Javascipt？

我正在创建一个网页（电子商务），并尝试放置一个带有自动完成建议的搜索栏，这是我使用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>

$（文档）.ready（函数（）{
$（'#products'）.keyup（function（）{
var query=$（this.val（）；var query=document.querySelectorAll（this.val（）；
如果（查询！=''）
{  
$.ajax（{
url:“search.php”，
方法：“张贴”，
数据：{query:query}，
成功：功能（数据）
{  
$（'#productlist'）.fadeIn（）//
$（'#productlist'）.html（数据）；
}  
});  
}  
});  
$（文档）.on（'click'，'li'，function（）{
$（'#products'）.val（$（this.text（））；
$（“#产品列表”）.fadeOut（）；
});  
});  
$（“#产品”）.keyup（函数（）{
如果（$（“#产品”）.val（）=''）{
$（“#产品列表”）.hide（）；
}
});

我试图不使用任何框架，因此我想将上述代码转换为香草javascript，这是我目前拥有的代码：

<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>

document.querySelector（document.ready）（函数（）{
document.queryselectoral（“.products”）.keyup（函数（）
{  
var query=document.querySelectorAll（this.value（）；
如果（查询！=''）
{  
fetch（“search.php”）
.then（（response））=>response.json（）
.then（data）=>console.log（data））；
});  
}  
});  
addEventListener（“单击”，函数（）{console.log（“单击”）；}）；
document.querySelector（document.addEventListener（'click'，'li'，function（）{
document.querySelector（'#products'）.val（document.querySelector（this.text（））；
document.querySelector（'#productlist'）.fadeOut（）；
});  

Hi@zzzz，你到底有什么问题。请尽量具体一点。理想情况下，使用stack snippets工具提供一个新的代码段。这可能会引起兴趣：