如何将搜索表单更改为单独的单个数字字段？

Question

我有一个多字符搜索字段，它通过 AJAX 获取 WoocCommerce 产品数据并且工作正常。

当前搜索字段

我需要将搜索字段拆分为单个 6 位数字框，这是我可以使用的表单示例：

<form>
     <input type="number" name="abc" min="0" max="9">
      <input type="number" name="abc" min="0" max="9">
      <input type="number" name="abc" min="0" max="9">
      <input type="number" name="abc" min="0" max="9">
      <input type="number" name="abc" min="0" max="9">
      <input type="number" name="abc" min="0" max="9">
        </form>

如何将搜索字段的字符串拆分为多个单个数字的搜索字段？

我的前端代码

<input type="text" name="keyword" id="keyword" onkeyup="fetch()">
<div id="datafetch">Your numbers will show here</div>
<script>
function fetch(){
    $.post('<?php echo admin_url('admin-ajax.php'); ?>', 
    {'action':'my_action'},
    function(response){
        $('#datafetch').append(response);
        console.log(result);
    });
}
</script>

Functions.php

中的代码

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'] );
}

Answer 1

使用您建议的脚本，但为每个输入字段放置制表符索引：

然后做一些用户体验任务：

因为你指定了 type='number' 那么你不能使用 maxlength 属性来防止每个输入输入超过 1 个数字所以你必须在你的 js 中处理它。
让用户可以通过按退格键返回到之前的输入
如果用户手动聚焦并按下另一个数字，则替换当前输入值
做一些 UI 工作！

现在您有了用户友好的独立输入框。但是你必须在提交给 WordPress admin-ajax 之前整合它们的输入值以传递给你的函数，或者你可以单独发送它们并将它们整合到服务器端函数中，做你想做的。

这是演示：

function fetch(){
    $('#keyword').val() = $('#input1').val() + 
                          $('#input2').val() + 
                          $('#input3').val() + 
                          $('#input4').val() + 
                          $('#input5').val() + 
                          $('#input6').val() ; 
   //rest of your function
}

$(function() {

      $("input").keydown(function (e) {
        if(e.keyCode == 8) {
           $(this).prev().focus();
        }
        if (this.value.length == this.maxLength) {
          $(this).val('');
        }
    });
  
    $("input").keyup(function () {
        if (this.value.length == this.maxLength) {
          $(this).next().focus();
        }
    });
  
});

input {  
    height: 21px;
    background: #f1f1f1;
    border: 1px #c9c9c9 solid;
    border-radius: 3px;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
<form>
     <input id="input1" type="number"  min="0" max="9" tabindex="1"  maxlength="1">
     <input id="input2" type="number"  min="0" max="9" tabindex="2"  maxlength="1">
     <input id="input3" type="number"  min="0" max="9" tabindex="3"  maxlength="1">
     <input id="input4" type="number"  min="0" max="9" tabindex="4"  maxlength="1">
     <input id="input5" type="number"  min="0" max="9" tabindex="5"  maxlength="1">
     <input id="input6" type="number"  min="0" max="9" tabindex="6"  maxlength="1">
 </form>

如何将搜索表单更改为单独的单个数字字段？

How can I change the search form to separate single digits fields?

html

php

woocommerce