如何将WooCommerce多字符AJAX搜索框改造为6个单数字输入框

原有多字符搜索字段效果：

我们需要将其适配为6位单数字输入框，无需修改原有核心检索逻辑，仅需调整前后端交互代码即可，具体实现步骤如下：

1. 替换前端输入框代码 #

把原有的单text输入框替换为6个单数字输入框，效果如下：

代码示例：

<!-- 替换原有的keyword输入框 -->
<div class="digit-input-group">
  <input type="number" class="search-digit" min="0" max="9" maxlength="1" data-index="0">
  <input type="number" class="search-digit" min="0" max="9" maxlength="1" data-index="1">
  <input type="number" class="search-digit" min="0" max="9" maxlength="1" data-index="2">
  <input type="number" class="search-digit" min="0" max="9" maxlength="1" data-index="3">
  <input type="number" class="search-digit" min="0" max="9" maxlength="1" data-index="4">
  <input type="number" class="search-digit" min="0" max="9" maxlength="1" data-index="5">
</div>
<div id="datafetch">您输入的数字将在此处展示</div>

2. 修改前端JS逻辑 #

主要实现两个功能：输入单数字后自动跳到下一个输入框、拼接所有输入值为完整关键词发起AJAX请求，同时修正你原有代码的参数不匹配问题：

// 监听所有数字输入框的输入事件
$('.search-digit').on('input', function() {
  // 限制只能输入1位数字
  if($(this).val().length > 1) {
    $(this).val($(this).val().slice(-1));
  }
  // 输完自动跳到下一个输入框
  const currentIndex = parseInt($(this).data('index'));
  if($(this).val() !== '' && currentIndex < 5) {
    $('.search-digit').eq(currentIndex + 1).focus();
  }
  // 拼接所有输入值为完整关键词
  let fullKeyword = '';
  $('.search-digit').each(function() {
    fullKeyword += $(this).val() || '';
  });
  // 只有关键词长度≥1的时候发起请求，可根据需求调整触发长度
  if(fullKeyword.length >= 1) {
    $.post('<?php echo admin_url('admin-ajax.php'); ?>', 
      {
        'action': 'data_fetch', // 这里要和后端钩子的action名一致，你原来写的my_action是错的
        'keyword': fullKeyword
      },
      function(response){
        $('#datafetch').html(response); // 用html替换原有内容比append更合理，避免结果堆叠
        console.log(response); // 你原来的result变量不存在，修正为response
      }
    );
  } else {
    $('#datafetch').html('您输入的数字将在此处展示');
  }
});

// 可选优化：回删时自动跳回上一个输入框
$('.search-digit').on('keydown', function(e) {
  const currentIndex = parseInt($(this).data('index'));
  if(e.key === 'Backspace' && $(this).val() === '' && currentIndex > 0) {
    $('.search-digit').eq(currentIndex - 1).focus();
  }
});

3. 后端逻辑适配（functions.php） #

你原有后端的商品检索逻辑不需要改动，只需确保正确接收前端传的keyword参数即可，修正后的代码：

add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
   $myquery = esc_attr( $_POST['keyword'] );
   // 这里保留你原来的WooCommerce商品检索逻辑即可，因为$myquery和之前单输入框传的字符串格式完全一致
   
   // 最后记得要wp_die()，这是WordPress AJAX接口的要求
   wp_die();
}

适配完成后原有搜索逻辑完全复用，和原来单输入框的检索效果一致。

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