Determinar cuando un usuario está escribiendo

Estoy construyendo un cuadro de búsqueda (campo de entrada) que debería hacer una llamada al servidor para filtrar una cuadrícula con el texto insertado en él, pero necesito hacerlo de una manera inteligente, necesito disparar la llamada al servidor solo si el usuario se ha detenido. Ahora estoy tratando de implementarlo, pero si alguien sabe cómo hacerlo estaré muy contento. De todos modos, si lo hago primero publicaré la respuesta aquí ... Saludos cordiales, Jaime.Determinar cuando un usuario está escribiendo

Fuente

2008-12-11 Jaime Febres

Cuando se pulsa una tecla:
1. Comprobar si hay un temporizador existente - pararlo si hay una
2. iniciar un temporizador.
Cuando el temporizador caduque, llame al método del servidor.

var searchTimeout; 
document.getElementById('searchBox').onkeypress = function() { 
    if (searchTimeout != undefined) clearTimeout(searchTimeout); 
    searchTimeout = setTimeout(callServerScript, 250); 
}; 
function callServerScript() { 
    // your code here 
}

Fuente

2008-12-11 16:15:10 nickf

Asegúrate de que el temporizador tenga un retraso del tiempo que consideres "hecho escribiendo" para que no detectes pausas pequeñas. Alternativamente, use el evento onblur para ver cuando el usuario hace clic fuera del cuadro de texto. – Karl

sí, la demora debe depender de qué tan intensa es la búsqueda, qué tan receptiva quiere que sea, y también: qué tan rápido sus usuarios escriben normalmente. He usado 250ms para una búsqueda y ha estado bien IMO. – nickf

¿no debería el evento ser onkeypress, o algo así? –

que no saben mucho acerca de JavaScript, pero se puede usar un temporizador (digamos que se establece en 5 segundos) que consigue restablecer en cada evento de cambio de la caja de entrada. Si el usuario deja de escribir durante más de 5 segundos, el temporizador expira y desencadena el envío.

El problema con este enfoque es que el envío se activa en cada pausa, p. si el usuario deja de escribir un cuento para tomar un café. Deberá ver si esto es aceptable para los usuarios.

Fuente

2008-12-11 16:16:28 Treb

Puede usar las llamadas al setTimeout que llaman a su función de servidor (con un retraso de 2-3 segundos) en un evento de pulsación de tecla. Tan pronto como se presiona una tecla, cancele la llamada anterior setTimeout y cree una nueva.

Luego, han transcurrido 2-3 segundos sin presionar las teclas, el evento del servidor se disparará.

Fuente

2008-12-11 16:16:56

jeje ... ¡usted, inteligente demonio nickf! Escribes más rápido que yo también. –

muahahah :) ¿Crees que obtuve este nivel de representante sabiendo * cosas? jaja! – nickf

Hehe ... Al menos me podrías haber reconvencionado: D Después de todo, * lo * sé, y mi respuesta * es * útil. –

gracias por su comentario. que había implementado esta pieza de código y parece que hace el trabajo (usando jQuery):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<script src="jquery.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    var interval = 500; 
    var filterValue = ""; 
    $(document).ready(function() { 
     $(".txtSearch").bind("keypress", logKeyPress); 
    }); 
    function logKeyPress() { 
     var now = new Date().getTime(); 
     var lastTime = this._keyPressedAt || now; 
     this._keyPressedAt = now; 
     if (!this._monitoringSearch) { 
      this._monitoringSearch = true; 
      var input = this; 
      window.setTimeout(
       function() { 
        search(input); 
       }, 0); 
     } 
    } 
    function search(input) { 
     var now = new Date().getTime(); 
     var lastTime = input._keyPressedAt; 
     if ((now - lastTime) > interval) { 
      /*console.log(now); 
      console.log(lastTime); 
      console.log(now - lastTime);*/ 
      if (input.value != filterValue) { 
       filterValue = input.value; 
       //console.log("search!"); 
       alert("search!"); 
      } 
      input._monitoringSearch = false; 
     } 
     else { 
      window.setTimeout(
       function() { 
        search(input); 
       }, 0); 
     } 
    } 
</script>

Fuente

2008-12-11 17:55:36

Lo siento, pero no creo que sea una muy buena forma de hacerlo ... ¿No llamará continuamente a search() una y otra vez hasta que termine el intervalo? – nickf

No, se detendrá cuando la diferencia entre la última vez que se presionó una tecla y la hora actual> a la variable * interval * (nombre incorrecto que conozco). Pruébalo por ti mismo. –

Aquí es un simple forma en que funcionará sin jQuery:

<input type="text" id="TxtSearch" onchange="countDown=10;" /> 

<script type="text/javascript"> 

var countDown = 0; 
function SearchTimerTick() 
{ 
    if(countDown == 1) 
    { 
     StopTypingCommand(); 
     countDown = 0; 
    } 

    if(countDown > 0) 
     countDown--; 
} 

window.setInterval(SearchTimerTick,1000); 

</script>

Fuente

2008-12-11 18:43:11 Paul

También es probable que desee comprobar la longitud de la cadena en el cuadro de entrada, de lo contrario corre el riesgo de devolver un gran conjunto de resultados!

Fuente

2008-12-12 00:26:49

punto muy cierto, aunque eso probablemente podría hacerse desde el servidor. Sin embargo, definitivamente busca una cuerda vacía. – nickf

Gracias por su comentario, en la aplicación real, un cuadro vacío es un filtro de criterios válido (significa * muéstreme todo *), estoy paginando los resultados para que no haya gastos generales. –

Determinar cuando un usuario está escribiendo

Respuesta

Cuestiones relacionadas