Pesquisa de Ajax estilo do Facebook
-
21-09-2019 - |
Pergunta
Eu criei uma pesquisa de Ajax no estilo do Facebook para o meu site, onde, quando você digitar, ele trará os resultados em uma boa lista abaixo da sua pesquisa.
$("#s").keyup(function() {
var searchbox = $(this).val();
var dataString = 's='+ searchbox;
if(searchbox!='') {
$.ajax({
type: "POST",
url: "/livesearch.php",
data: dataString,
cache: false,
success: function(html){
$("#display").html(html).show();
}
});
} else {return false; }
});
$("body").click(function() {
$("#display").hide();
});
O problema é um pouco ineficaz, pois o usuário digitará uma palavra, por exemplo, "futebol". Isso realizará 8 solicitações ao servidor. Qual seria uma maneira mais eficaz de fazer isso? Idealmente, acho que deve armazenar a solicitação por 1 segundo antes de fazer uma pesquisa em vez de instantânea KeyUp. Mas não 100% de certeza de como fazer isso ...
Solução
O método ao qual você está se referindo é chamado "Debouncing"
Eu geralmente tenho uma função de "debounce" na parte inferior de todos os meus scripts
var debounce=function(func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
};
E então sempre que fizer qualquer coisa que se beneficie de um debounce, posso usá -lo genericamente
Então seu código seria reescrito como
$("#s").keyup(debounce(function() {
var searchbox = $(this).val();
var dataString = 's='+ searchbox;
if(searchbox!='') {
$.ajax({
type: "POST",
url: "/livesearch.php",
data: dataString,
cache: false,
success: function(html){
$("#display").html(html).show();
}
});
} else {return false; }
}
,350 /*determines the delay in ms*/
,false /*should it execute on first keyup event,
or delay the first event until
the value in ms specified above*/
));
Outras dicas
Outra opção seria começar a pesquisar após 2/3 caracteres. Esperar por 1 segundo antes de fazer todas as solicitações não parece bom para mim. Tente também enviar muito menos dados de volta ao servidor, o que também pode tornar a solicitação e a resposta mais rapidamente.
Você pode ter um objeto JSON em algum lugar e pesquisando isso em vez de pesquisar no banco de dados várias vezes. Não trará muita saliência, desde que não seja uma lista de 1.000 amigos ou algo assim.