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

user_9111944 0
Viewed 73

I have a multiple character search field which fetches WoocCommerce product data via AJAX and works correctly.

Current search field

enter image description here

I need to split my search field into single 6 digit boxes, this is an example of the form I could use:

<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>

enter image description here

How can I split the string of my search field into multiple single digit search fields?

My Front End Code

<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>

Code in 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'] );
}
woocommerce html php
1 Answers

Use your suggested script but put tab index per each input field :

then do some UX tasks :

  • since you specify type='number' then you cant use maxlength attribute to prevent entrance of more than 1 digit per input so u must handle it in your js.
  • let user can back to previous input by pressing backspace
  • replace current input value if the user focus manually on it and press another number
  • do some UI works !

now you have your separated input boxes that work user-friendly. but you must integrate their input value before submitting to WordPress admin-ajax for passing to your function, or you can send them individually and integrate them in server-side function, do what you want.

here is the demo :

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>

user_36340110
Related