¿Cómo se soluciona el problema de "retraso" de una búsqueda en vivo?

Question

hola Estoy implementando una función de búsqueda en vivo (= buscar mientras escribe) en mi aplicación web. Actualmente estoy usando el evento de teclado para enviar la solicitud de búsqueda a través de la publicación de Ajax, p.

$('#SearchField').keyup(function(e) { 
     $.post(
      ... 
     ); 
}); 

pero esto conduce a algún tipo de problema de retraso, en algunos casos, cuando la búsqueda, por ejemplo después de "problema", la respuesta de "pro" muestra hasta manera después de la respuesta de "problema" y sobrescribe el corregir el resultado de la búsqueda con una forma de obtener un gran resultado.

¿Cuál sería un buen enfoque para combatir este comportamiento?

tia

Answer 1

puede abortar la solicitud anterior

var xhr = null; 
$('#SearchField').keyup(function(e) { 
    if (xhr !== null) xhr.abort(); 
    xhr = $.post(
    ... 
); 
}); 

o programar una ID de asignar a cada solicitud. cuando se completa una solicitud, si una identificación mayor ya vuelve, ignore la respuesta. de lo contrario, almacene la identificación.

Answer 2

$('#SearchField').keyup(function(e) { 
    t = setTimeout(function(){   
    $.post(
      ... 
    ); 
    },1000); 
}); 

Con este código, su función se ejecutará después de 1000 ms. Si la llave se activa nuevamente, sobrescribirá la variable y cancelará efectivamente la primera función. En otras palabras, la publicación completa no ocurrirá hasta que el usuario deje de escribir durante 1 segundo.

Answer 3

he implementado una "búsqueda en tiempo real" de una vez utilizado un tiempo de espera sólo para iniciar la búsqueda después de sin entrada había sido hecha por un período de tiempo (medio segundo o así). De esta forma, la búsqueda solo se activaría, si el usuario deja de escribir, reduciendo los resultados demorados y la carga del servidor.

En su caso yo verificaría si el usuario continúa escribiendo y no enviará la búsqueda ni mostrará ningún resultado "anterior" que llegue tarde.

Answer 4

La mayoría de las autocompletaciones no reemplazan lo que el usuario está escribiendo; muestran las opciones posibles en un menú desplegable que el usuario puede seleccionar.

Aquí está un ejemplo maravilloso de una completa ya bien escrito automático: http://view.jquery.com/trunk/plugins/autocomplete/demo/

Answer 5

Como has estado descubriendo, hay una gran cantidad de IU complicado (interfaz de usuario) o UX (experiencia del usuario) temas involucrados en la creación de una gran experiencia de búsqueda en vivo.

Dejo la pesada carga de las pruebas de UI/UX a la gente de Yahoo que ha desarrollado el control automático que utilizan en sus propiedades web. Y la mejor noticia es que lo han lanzado como código abierto: http://developer.yahoo.com/yui/autocomplete/

La no tan buena noticia es que no usa JQuery y usted sí. Puede ver su fuente y ver cómo manejan los múltiples problemas de tiempo, etc. Tenga en cuenta que comienzan su temporizador al pulsar la tecla, no hacia arriba.

También hay un buen artículo sobre cómo Flickr utiliza la función de autocompletar Yaho para la implementación en la página de búsqueda: http://code.flickr.com/blog/2009/03/18/building-fast-client-side-searches/

Answer 6

el truco está utilizando aborta y las colas ajax, escribí una biblioteca personalizada para la búsqueda en tiempo real que he creado, filtros a través de 20 millones de registros, como mantequilla (las tablas optimizadas de eav ayudan con las velocidades de consulta). también hay disponible un complemento de administrador de jquery ajax que funciona bien (necesito algo un poco más sofisticado, así que escribí el mío). puede establecer el número de cola, abortar en una nueva llamada, etc. De esta forma, nada se solicita hasta la entrada del usuario final