Ao programar uma caixa de pesquisa, enfrentei dois problemas:

1. Como AJAX significa assíncrono e a consulta de “A” leva mais tempo do que “AAA”, certifique-se de que o que é exibido é a consulta mais recente.
2. Como um cara que digita muito rápido, certifique-se de não enviar X solicitações inúteis.

Acontece que era muito simples de gerenciar, sem plug-ins nem nada!

 Problema de sincronismo

var input = $("#theInputSelector");
input.change(function() {
  var value = input.val();
  $.get("/the/url/to/call", function(data) {
    if (value != input.val()) {
      return;
    }
    doStuff();
  });
});

Basta verificar o valor quando o retorno de chamada AJAX é chamado. O resultado mudou em nossa ausência? Esqueça.
Sem fila, todas as consultas são feitas e a correta é mantida.

 Não mande tudo

Você não quer que seu servidor receba:

/search/I
/search/I%20%
/search/I%20%j
/search/I%20%ju
/search/I%20%jus
/search/I%20%just

Bem, novamente, mesma lógica e solução simples:

var input = $("#theInputSelector");
input.change(function() {
  var value = input.val();
  setTimeout(function() {
    if (value != input.val()) {
      return;
    }

    $.get("/the/url/to/call", function(data) {
      if (value != input.val()) {
        return;
      }
      doStuff();
    });
  }), 200);
});

200ms é uma escolha totalmente arbitrária, cabe a você encontrar um equilíbrio entre obter respostas extremamente rápidas e fazer DDOS no servidor.

Gostei, deixe uma dica no Flattr 🙂
<a href=” http://flattr.com/thing/1375386/manudwarf-on-Coderwall “target=”_blank”> </a>