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
Respuesta
- Cuando se pulsa una tecla:
- Comprobar si hay un temporizador existente - pararlo si hay una
- 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
}
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.
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á.
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>
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>
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!
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. –
- 1. '¿El usuario está escribiendo un mensaje' función ...?
- 2. Determinar cuando un usuario bloquea/desbloquea su PC
- 3. Función "El usuario está escribiendo" en el chat
- 4. ¿Cómo evito que EditText cambie el tamaño cuando el usuario está escribiendo?
- 5. determinar cuando el usuario creó la cuenta de Facebook
- 6. ¿es posible saber si el usuario está escribiendo o eliminando caracteres en un campo de texto?
- 7. Determinar si un archivo está abierto
- 8. Determinar la zona horaria de un usuario
- 9. Cómo evitar disparos múltiples en EditText mientras el usuario está escribiendo?
- 10. ¿Cómo puedo determinar si un archivo está bloqueado con VBS?
- 11. ¿StreamWriter está escribiendo retornos de carro?
- 12. ARM: ¿Está escribiendo/leyendo de int atomic?
- 13. Java - mkdir() no está escribiendo el directorio
- 14. ¿Está escribiendo un servicio para mantener sincronizadas dos carpetas?
- 15. StreamWriter no está escribiendo los últimos caracteres en un archivo
- 16. ¿Cómo determinar si un dispositivo Android está rooteado programáticamente?
- 17. escribiendo en un entorno global cuando se ejecuta en paralelo
- 18. ¿Hay alguna manera de determinar si un usuario está utilizando banda ancha o marcación
- 19. ¿Cómo puedo determinar qué versión de IE está ejecutando un usuario en JavaScript?
- 20. Determinar si ASP.Net está registrada correctamente
- 21. Escribiendo un Comprobador SSL usando Java
- 22. ¿Cómo puedo determinar programáticamente qué aplicación está bloqueando un archivo?
- 23. Determinar si un usuario es ideal en el IRC
- 24. detectar cuando un usuario deja una página web
- 25. Determinar qué rubygem está usando
- 26. Escribiendo un java.net.SocketImplFactory
- 27. Escribiendo un destructor LinkedList?
- 28. Determinar el país del usuario de iPhone
- 29. Cómo determinar si un evento ya está suscrito
- 30. Cómo determinar qué adaptador de red está conectado a Internet
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í? –