AutoSuggest eficiente con jQuery?

Question

Estoy trabajando para crear un plugin jQuery AutoSuggest, inspirado en el centro de atención de Apple.

Aquí está el código general:

$(document).ready(function() { 
$('#q').bind('keyup', function() { 

    if($(this).val().length == 0) { 
     // Hide the q-suggestions box 
     $('#q-suggestions').fadeOut(); 
    } else { 
     // Show the AJAX Spinner 
     $("#q").css("background-image","url(/images/ajax-loader.gif)"); 

     $.ajax({ 
      url: '/search/spotlight/', 
      data: {"q": $(this).val()}, 
      success: function(data) { 
       $('#q-suggestions').fadeIn(); // Show the q-suggestions box 
       $('#q-suggestions').html(data); // Fill the q-suggestions box 

       // Hide the AJAX Spinner 
       $("#q").css("background-image","url(/images/icon-search.gif)"); 

      } 
     }); 
    } 
}); 

El problema que quiero resolver así & elegantemente, no está matando al cortar. En este momento, el código anterior golpea el servidor cada vez que escribe una clave y no espera a que termine de escribir. ¿Cuál es la mejor manera de resolver esto? A. ¿Matar la solicitud AJAX anterior? B. ¿Algún tipo de caché AJAX? C. Agregando algún tipo de retraso para enviar solo .AJAX() cuando la persona ha dejado de escribir durante 300ms más o menos?

Answer 1

Intente utilizar Ben Alman's Throttle & Debounce plugin

le permite cosas "retraso" hasta que el usuario ha terminado.

Para ver un ejemplo sobre cómo usarlo echa un vistazo a su example of debouncing with a pretend autocomplete

Su código habría convertido básicamente en

var qinput = $('#q').bind('keyup', $.debounce(250, function() { 

    if($(this).val().length == 0) { 
     // Hide the q-suggestions box 
     $('#q-suggestions').fadeOut(); 
    } else { 
     // Show the AJAX Spinner 
     qinput.addClass('loading'); 

     $.ajax({ 
      url: '/search/spotlight/', 
      data: {"q": $(this).val()}, 
      success: function(data) { 
       $('#q-suggestions') 
        .fadeIn() // Show the q-suggestions box 
        .html(data); // Fill the q-suggestions box 

       // Hide the AJAX Spinner 
       qinput.removeClass('loading').addClass('search'); 
      } 
     }); 
    } 
})); 

CSS

.loading{ 
    background: url('/images/ajax-loader.gif'); 
} 
.search{ 
    background: url('/images/icon-search.gif'); 
} 

Usted notará que me quita el fondo de la imagen css y los reemplazó con addClass/removeClass. Mucho más fácil de manejar cosas CSS en archivos css.

Answer 2

Me gustaría una variante de C. No espere a que los usuarios dejen de escribir, pero espere un momento (200ms?) Después de la primera pulsación de tecla. Luego, después de ese momento, en muchos casos habrá recibido pulsaciones de teclas adicionales y luego usará los caracteres escritos para obtener el autosugestor. Si se presiona otra tecla después de enviar la solicitud, comienza a contar nuevamente.

Y definitivamente debe hacer algo de almacenamiento en caché también; la gente usará el retroceso y tendrás que volver a mostrar la lista de nombres.

Answer 3

El complemento de autocompletar tiene una opción de tiempo de espera que puede configurar para hacer esto.

http://docs.jquery.com/Plugins/AutoComplete/autocomplete

Answer 4

No sé, lo que DB está usando o está usted usando el archivo codificado !?

todos modos un buen punto de partida es, esperar al menos un NUMS TOT de caracteres para

ej .: después de 3 (que es una longitud de palabra min para la búsqueda de mysql en la mayoría de los casos) carboniza a entonces se puede ¡Comienza a buscar tu archivo DB o json!

Creo que debes dar a PHP u otros el trabajo duro como FILTRAR etc., etc. antes de enviar de vuelta la respuesta!

por cierto creo que uno de los mejores AutoSuggest es el de brandspankingnew