如何更改搜索表單以分隔單個數字字段？

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>

函數中的代碼.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

使用您建議的腳本，但在每個輸入字段中放置標簽索引：

然后做一些 UX 任務：

• 因為你指定 type='number' 那么你不能使用 maxlength 屬性來防止每個輸入超過 1 位的輸入，所以你必須在你的 js 中處理它。
• 讓用戶可以通過按退格鍵返回上一個輸入
• 如果用戶手動關注當前輸入值並按下另一個數字，則替換當前輸入值
• 做一些 UI 工作！

現在您有了用戶友好的分隔輸入框。 但是您必須在提交給 WordPress admin-ajax 以傳遞給您的 function 之前集成它們的輸入值，或者您可以單獨發送它們並將它們集成到服務器端 ZC1C425268E68385D1AB5074C17A9 中。

這是演示：

 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>