-1

Quiero activar una solicitud ajax cuando el usuario haya terminado de escribir en un cuadro de texto. No quiero que ejecute la función cada vez que el usuario escribe una letra porque eso daría como resultado MUCHAS solicitudes de AJAX, sin embargo, tampoco quiero que tengan que pulsar el botón Intro.

¿Hay alguna manera para que pueda detectar cuándo el usuario ha terminado de escribir y luego hacer la solicitud de Ajax?

fuente

1
  • 1
    Haz intentado algún código, podrías agregarlo a tu pregunta ? el 20 nov. 2017 a las 15:22

2 respuestas 2

9

Podrías usar el evento onblur del input generando un listener y de esa manera cuando pierda el foco el campo va a hacer la consulta ya sea con tab o con el click izquierdo del mouse:

    $( "#target" ).blur(function() {
      alert( "Handler for .blur() called." );
      // tu codigo ajax va dentro de esta function...
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
      <input id="target" type="text" value="Field 1">
      <input type="text" value="Field 2">
    </form>
    <div id="other">
      Trigger the handler
    </div>
    The event handler can be bound to the first input field:

8

Añade un pequeño retardo para que no se realice una llamada AJAX con cada tecla sino cuando pase X milisegundos (reiniciando el retardo con cada tecla pulsada). De ese modo, no estarías bombardeando tu servidor con peticiones AJAX, sino sólo cuando el usuario haya "terminado" de escribir. Ajusta el valor de X al que creas que es más conveniente (en el ejemplo abajo uso 250).

Así en lugar de hacer esto:

$("#tu-campo").on("keyup", function() {
    // llamada AJAX
});

lo que harías sería algo como esto:

var controladorTiempo = "";

function codigoAJAX() {
    // llamada AJAX
}

$("#tu-campo").on("keyup", function() {
    clearTimeout(controladorTiempo);
    controladorTiempo = setTimeout(codigoAJAX, 250);
});

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.