Boa tarde, pessoal!
Utilizar onKeyUp para fazer chamadas Ajax é bem interessante, melhorando e muito a experiência do usuário com o sistema, de maneira que os resultados da pesquisa vão aparecendo na medida que ele pressiona as teclas no teclado. Porém, imagine, a cada tecla que o usuário pressiona é uma chamada Ajax na aplicação, o que pode reduzir em performance e aumentar a utilização de banda.
Sendo assim, uma opção é esperar o usuário parar de digitar por um tempinho para então pesquisar via Ajax. Pode parecer voltar no tempo, mas o intervalo é tão pequeno (na ordem de 500 milisegundos) que nem dá pra perceber direito. Além do mais nada impede que coloquemos 250 milisegundos ou menos. Para isso vamos usar as funções setTimeOut e clearInterval.
var interval = 0;
$(function()
{
$('#query').keyup(function()
{
// começa a contar o tempo
clearInterval(interval);
// 500ms após o usuário parar de digitar a função é chamada
interval = window.setTimeout(function(){
// sua chamada ajax e demais códigos
}, 500);
});
}
É isso aí pessoal! Espero ter sisdo claro! Até a próxima!
Obrigado pelo tutorial. Você poderia me ajudar com um pequeno problema?
Meu código é esse:
var interval = 0;
$(document).ready(function()
{
$(".navegacaoli div div").hide();$(".navegacaoli div").mouseenter(function(){
// começa a contar o tempo
clearInterval(interval);
interval = window.setTimeout(function(){
$(".navegacaoli div div").slideDown();
}, 400);
}).mouseleave(function(){
clearInterval(interval);
interval = window.setTimeout(function(){
$(".navegacaoli div div").slideDown();
}, 400);
});
});
O problema é que ele parece não detectar o evento mouseleave
O que eu deveria fazer?
Olá Messias! Obrigado pelo comentário.
Creio que seria melhor usar a função “hover” da jQuery, não? Você poderia usar ela com “slideToggle”. Creio que ajudaria bastante.
Um abraço.
Obrigado pelo tutorial. Muito simples e eficiente.
Obrigado pelo comentário Bruno. Abs.
Era justamente o que eu precisava e estava sofrendo para fazer. Muito bom e muito obrigado.