WooCommerce结账页国家下拉框展开后自动聚焦搜索输入框实现咨询

实现原理 #

WooCommerce国家选择下拉默认使用Select2组件实现，原生未配置展开后自动聚焦搜索框的逻辑，我们可以通过监听Select2的展开事件，手动触发搜索框聚焦即可，无需修改WooCommerce核心代码。

具体操作步骤 #

• 步骤1：添加自定义代码 #

  你不需要查找国家下拉字段的原有代码位置，只需要将以下代码添加到当前使用的WordPress主题的functions.php文件末尾即可，如果你担心修改主题文件出错，也可以安装Code Snippets类的自定义代码插件，将代码作为新片段添加，优先级设置为10即可。

  add_action( 'wp_footer', 'auto_focus_country_select_search' );
  function auto_focus_country_select_search() {
      // 仅在结账页加载脚本，不影响其他页面性能
      if ( is_checkout() && ! is_wc_endpoint_url() ) :
  ?>
  <script type="text/javascript">
  jQuery(document).ready(function($){
      // 同时监听账单地址、配送地址的国家下拉展开事件
      $('select#billing_country, select#shipping_country').on('select2:open', function () {
          // 加100ms延迟，等待下拉框渲染完成后再聚焦，避免失效
          setTimeout(() => {
              document.querySelector('.select2-search__field').focus();
          }, 100);
      });
  });
  </script>
  <?php
      endif;
  }
  

• 步骤2：验证效果 #

  代码添加完成后，清空网站缓存和浏览器本地缓存，打开结账页点击国家下拉框，即可直接输入内容搜索国家，无需手动点击搜索输入框。

异常排查 #

如果添加代码后未生效，可逐一检查以下配置：

• 确认你的网站正常加载了jQuery，WooCommerce默认会加载jQuery，部分自定义主题如果手动禁用了jQuery需要先恢复
• 通过浏览器开发者工具（F12）检查国家下拉框的实际ID，如果和代码中的billing_country/shipping_country不一致，替换为实际ID即可
• 如果网站加载速度较慢，可以适当调大延迟时间，比如把100改为200，避免下拉框未渲染完成导致聚焦失败

问题效果示意：

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