我正在学习Udemy课程，在这个课程中，它教你如何使用HTML和JS在WordPress中为网站创建搜索框。
以下是用HTML编写的searchbox结构代码：

<div class = "search-overlay"> 
  <div class = "search-overlay__top">
    <div class = "container">
      <i class = "fa fa-search search-overlay__icon" aria-hidden = "true"></i>
       <input type = "text" class = "search-term" placeholder = "What are you looking for?" id ="abc" > 
       <i class = "fa fa-times search-overlay__close" aria-hidden = "true"></i>
    </div>
  </div>
</div>

这是用JS写的代码：

import $ from 'jquery';
class livesearch{
constructor() {
this.searchTypingArea = $("#abc");}
events()  {
this.searchTypingArea.on("keydown", this.TypingLogic.bind(this)); }
TypingLogic() {
       setTimeout(function() {console.log("Timeout test");}, 2000);
       //clearTimeout(this.typingTimer);
       //this.typingTimer = setTimeout();
    }
    }

我的意思是，我知道代码不起作用，因为searchTypingArea不知何故未定义，但我从搜索框中获取ID，不知道为什么它不起作用。$ operator也可以工作，因为我使用class而不是ID定义了多个其他变量，例如：

this.openingSearchButton = $(".js-search-trigger");
    this.closingCrossButton = $(".search-overlay__close"); 
    this.searchoverlay = $(".search-overlay");

这些都有用。使用ID时我的方式有问题吗？谢谢你