跟随Udemy WordPress课程实现实时搜索栏时遇代码构建错误

嘿，我看你在Udemy的WordPress开发课上做实时搜索栏的时候碰到了这个Unexpected token语法错误，咱们来一步步排查并搞定它：

问题根源拆解 #

你代码里的错误主要是语法闭合问题和结构混乱导致的，具体来说：

• getResults方法里的HTML模板字符串被错误地多次用);提前闭合，导致Babel无法解析完整的模板结构
• 拼写错误：把combinedResults写成了combineResults，length写成了lenght，这会导致变量未定义或者判断逻辑失效
• 类方法嵌套错误：keyPressDispatcher、openOverlay这些方法被不小心嵌套到了getResults里面，破坏了类的结构
• 多个方法和export语句没有正确闭合，位置也不对

修正后的完整代码 #

import $ from 'jquery';

class Search {
  // 初始化对象
  constructor() {
    this.addSearchHTML();
    this.resultsDiv = $("#search-overlay__results");
    this.openButton = $(".js-search-trigger");
    this.closeButton = $(".search-overlay__close");
    this.searchOverlay = $(".search-overlay");
    this.searchField = $("#search-term");
    this.events();
    this.isOpenOverlayOpen = false;
    this.isSpinnerVisible = false;
    this.previousValue;
    this.typingTimer;
  }

  // 绑定事件
  events() {
    this.openButton.on("click", this.openOverlay.bind(this));
    this.closeButton.on("click", this.closeOverlay.bind(this));
    $(document).on("keydown", this.keyPressDispatcher.bind(this));
    this.searchField.on("keyup", this.typingLogic.bind(this));
  }

  // 输入逻辑处理
  typingLogic() {
    if (this.searchField.val() != this.previousValue) {
      clearTimeout(this.typingTimer);
      if (this.searchField.val()) {
        if (!this.isSpinnerVisible) {
          this.resultsDiv.html('<div class="spinner-loader"></div>');
          this.isSpinnerVisible = true;
        }
        this.typingTimer = setTimeout(this.getResults.bind(this), 750);
      } else {
        this.resultsDiv.html('');
        this.isSpinnerVisible = false;
      }
    }
    this.previousValue = this.searchField.val();
  }

  // 获取搜索结果
  getResults() {
    $.getJSON(testData.root_url + '/wp-json/test/v1/search?term=' + this.searchField.val(), (results) => {
      // 这里根据你接口返回的实际结构调整，假设返回的是combinedResults数组
      const combinedResults = results.combinedResults || [];
      this.resultsDiv.html(`
        <div class="row">
          <div class="one-third">
            <h2 class="search-overlay__section-title">General Information</h2>
            ${combinedResults.length ? '<ul class="link-list min-list">' : '<p>No general information matches that search.</p>'}
            ${combinedResults.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')}
            ${combinedResults.length ? '</ul>' : ''}
          </div>
          <div class="one-third">
            <h2 class="search-overlay__section-title">Programs</h2>
            ${combinedResults.length ? '<ul class="link-list min-list">' : '<p>No programs match that search.</p>'}
            ${combinedResults.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')}
            ${combinedResults.length ? '</ul>' : ''}
            <h2 class="search-overlay__section-title">Professors</h2>
            ${combinedResults.length ? '<ul class="link-list min-list">' : '<p>No professors match that search.</p>'}
            ${combinedResults.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')}
            ${combinedResults.length ? '</ul>' : ''}
          </div>
          <div class="one-third">
            <h2 class="search-overlay__section-title">Campuses</h2>
            <p>No campuses match that search.</p>
            <h2 class="search-overlay__section-title">Events</h2>
            <p>No events match that search.</p>
          </div>
        </div>
      `);
      // 搜索完成后隐藏加载动画
      this.isSpinnerVisible = false;
    });
  }

  // 键盘事件分发
  keyPressDispatcher(e) {
    if (e.keyCode == 83 && !this.isOpenOverlayOpen && !$("input, textarea").is(':focus')) {
      this.openOverlay();
    }
    if (e.keyCode == 27 && this.isOpenOverlayOpen) {
      this.closeOverlay();
    }
  }

  // 打开搜索弹窗
  openOverlay() {
    this.searchOverlay.addClass("search-overlay--active");
    $("body").addClass("body-no-scroll");
    this.searchField.val('');
    setTimeout(() => this.searchField.focus(), 301);
    this.isOpenOverlayOpen = true;
  }

  // 关闭搜索弹窗
  closeOverlay() {
    this.searchOverlay.removeClass("search-overlay--active");
    $("body").removeClass("body-no-scroll");
    this.isOpenOverlayOpen = false;
  }

  // 添加搜索弹窗HTML
  addSearchHTML() {
    $('body').append(`
      <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="search-term">
            <i class="fa fa-window-close search-overlay__close" aria-hidden="true"></i>
          </div>
        </div>
        <div class="container">
          <div id="search-overlay__results"></div>
        </div>
      </div>
    `);
  }
}

export default Search;

额外提示 #

• 我假设你的API返回结果里包含combinedResults数组，如果实际接口返回的字段名不同，记得修改const combinedResults = results.combinedResults || []这一行来匹配你的数据
• 我给每个方法加了注释，方便你理清逻辑，你可以根据自己的习惯调整
• 搜索完成后记得隐藏加载状态，我已经在getResults的回调里加上了this.isSpinnerVisible = false

内容的提问来源于stack exchange，提问作者Thijs