Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

284
Vistas
¿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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda