无需Select2/Bootstrap的WordPress评论表单轻量jQuery替代方案咨询

无需引入Select2和Bootstrap，仅依靠已加载的jQuery库即可实现完全匹配的功能，总代码量不到原有实现的三分之一，加载性能大幅提升。

1. 简化后的HTML代码 #

去掉所有Bootstrap、Select2相关的资源引用，仅保留基础表单结构：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<form id="contactForm1" action="https://exsample.com/wp-json/wp/v2/comments/" method="post">
  Name : <input name="author_name" value=""> <br> 
  E-mail : <input name="author_email" value=""> <br>
  <!-- 替换原有下拉选择框，用输入框+隐藏域实现功能 -->
  <div class="post-select-wrap">
    关联文章：<input type="text" id="postSearchInput" placeholder="输入至少3个字符搜索文章">
    <input type="hidden" name="post" id="selectedPostId" value="">
    <ul id="postSearchResult" class="search-result-list"></ul>
  </div> <br>
  Comment : <textarea name="content" id="" cols="30" rows="10"></textarea>
  <button>Send</button>
</form>

2. 自定义基础样式（可根据站点风格自行调整） #

仅需少量样式控制下拉列表展示，无外部依赖：

.search-result-list {
  margin: 5px 0 0 0;
  padding: 0;
  border: 1px solid #e5e5e5;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  list-style: none;
  width: 300px;
  background: #fff;
}
.search-result-list li {
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
}
.search-result-list li:hover {
  background-color: #f5f5f5;
}
/* 清空按钮样式，用内置svg实现无需额外图标资源 */
#postSearchInput.clear {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 16px;
  padding-right: 28px;
}

3. 功能实现jQuery代码 #

完整覆盖原有Select2实现的所有功能：

jQuery(document).ready(function($) {
  // 防抖定时器，避免输入过程中频繁发起请求
  let debounceTimer = null;
  const $searchInput = $('#postSearchInput');
  const $resultList = $('#postSearchResult');
  const $postIdInput = $('#selectedPostId');

  // 监听输入事件发起搜索
  $searchInput.on('input', function() {
    const keyword = $(this).val().trim();
    clearTimeout(debounceTimer);

    // 输入为空时清空选中值和结果
    if (!keyword) {
      $postIdInput.val('');
      $resultList.hide().empty();
      $searchInput.removeClass('clear');
      return;
    }

    // 不满3个字符不发起请求，和原有逻辑一致
    if (keyword.length < 3) return;

    // 防抖延迟300ms发起请求
    debounceTimer = setTimeout(function() {
      $.ajax({
        url: 'https://exsample.com/wp-json/wp/v2/posts',
        dataType: 'json',
        data: { search: keyword },
        success: function(res) {
          $resultList.empty();
          if (res.length === 0) {
            $resultList.append('<li>未找到匹配的文章</li>');
          } else {
            // 渲染搜索结果
            res.forEach(post => {
              $resultList.append(`<li data-post-id="${post.id}" data-post-title="${post.title.rendered}">${post.title.rendered}</li>`);
            });
          }
          $resultList.show();
        }
      })
    }, 300);
  });

  // 点击选中搜索结果
  $resultList.on('click', 'li', function() {
    const postId = $(this).data('post-id');
    const postTitle = $(this).data('post-title');
    if (postId) {
      $postIdInput.val(postId);
      $searchInput.val(postTitle).addClass('clear');
    }
    $resultList.hide();
  });

  // 点击清空已选内容，匹配原有allowClear功能
  $searchInput.on('click', function(e) {
    if ($(this).hasClass('clear')) {
      const clickX = e.offsetX;
      const inputWidth = $(this).width();
      // 判断点击位置是否在清空图标区域
      if (clickX > inputWidth - 25) {
        $(this).val('').removeClass('clear');
        $postIdInput.val('');
        $resultList.hide().empty();
      }
    }
  });

  // 点击页面其他位置关闭搜索结果列表
  $(document).on('click', function(e) {
    if (!$(e.target).closest('.post-select-wrap').length) {
      $resultList.hide();
    }
  });
});

功能匹配说明 #

• 支持最少输入3个字符才发起搜索，和原有逻辑完全一致
• 异步请求WordPress REST接口获取文章列表，适配原有接口规则
• 点击选择文章后自动将文章ID存入提交字段，不影响原有表单提交逻辑
• 支持一键清空已选内容，匹配原Select2的allowClear功能
• 无任何外部框架依赖，仅用原生jQuery实现

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