Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

279
Visualizações
¿Cómo puedo cambiar el formulario de búsqueda para separar campos de un solo dígito?

Tengo un campo de búsqueda de varios caracteres que obtiene datos de productos de WoocCommerce a través de AJAX y funciona correctamente.

Campo de búsqueda actual

ingrese la descripción de la imagen aquí

Necesito dividir mi campo de búsqueda en cuadros de 6 dígitos, este es un ejemplo del formulario que podría usar:

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

ingrese la descripción de la imagen aquí

¿Cómo puedo dividir la cadena de mi campo de búsqueda en varios campos de búsqueda de un solo dígito?

Mi código de front-end

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

Código en Funciones.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'] ); }
over 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

Use su secuencia de comandos sugerida pero coloque el índice de tabulación por cada campo de entrada:

luego haz algunas tareas de UX:

  • dado que especifica type = 'number', entonces no puede usar el atributo maxlength para evitar la entrada de más de 1 dígito por entrada, por lo que debe manejarlo en su js.
  • permitir que el usuario pueda volver a la entrada anterior presionando la tecla de retroceso
  • reemplazar el valor de entrada actual si el usuario se enfoca manualmente en él y presiona otro número
  • ¡haz algunos trabajos de interfaz de usuario!

ahora tiene sus cuadros de entrada separados que funcionan de manera fácil de usar. pero debe integrar su valor de entrada antes de enviarlo a WordPress admin-ajax para pasar a su función, o puede enviarlos individualmente e integrarlos en la función del lado del servidor, haga lo que quiera.

aquí está la demostración:

 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>

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda