autocomplete - recordar - ¿Cómo funcionan las sugerencias de autocompletar?
input text autocomplete html5 (8)
También he estado trabajando recientemente en la función de autocompletar y usamos lucene para indexar el texto que se mostrará en autocompletar. La búsqueda es rápida con lucene. Algo que hay que tener en cuenta cuando se trabaja con datos de autocompletar:
- Frescura de sugerencias,
- Dependencia de los datos a largo plazo,
- Dependencia regional,
- Dependencia del lenguaje
Por ejemplo, si escribe algo en el cuadro de búsqueda de google / yahoo en la esquina superior derecha de Firefox, habrá algún tipo de ''sugerencia de autocompletar''.
Otro ejemplo es el cuadro de búsqueda de YouTube y el cuadro de edición de etiquetas Stackoverflow justo debajo de esta vista previa de la pregunta. ¿Cómo trabajan? ¿Qué tecnología hay detrás de ellos?
Hay tantas respuestas a esto como diferentes implementaciones de ellas. Nuestro autocompletador, del que puede ver una muestra en las obras apiladas, al generar un evento que luego se maneja en el código detrás de la página .ASPX desde la que rellena un ControlCollection con los controles que desee. Sin embargo, estamos en apilado solo utilizando controles literales con contenido de texto como enlaces de anclaje. Pero podríamos agregar casillas de verificación o imágenes si quisiéramos ...
Si está en ASP.NET, nuestro AutoCompleter es un gran lugar para comenzar. Si estás en "algo más" entonces probablemente ScriptAculous AutoCompleter es otro buen lugar para comenzar ...
Usan JavaScript para normalmente:
- Mire una matriz local de todos los valores posibles
- Solicite otra página (es decir, /autocomplete.php?q=partialText) en segundo plano.
- Llamar a un servicio web
Cuando JavaScript tiene la lista de entradas para mostrar, modifica la página para mostrar el cuadro de autocompletar.
Si desea poner un cuadro de autocompletar en su sitio web, lo he usado y he encontrado que lo siguiente es muy bueno. También se basa en el popular framework jQuery.
Es bastante simple.
Lado del cliente:
- Tomar pulsaciones de teclas en el campo de formulario
- Al presionar la tecla, realice una solicitud AJAX al servidor
- Si se ingresa otra pulsación de tecla inmediatamente, cancele la solicitud actual de AJAX, ya que está obsoleta ahora
- Hacer un nuevo AJAX solicitado con caracteres actualizados en el campo de formulario
- Mostrar la respuesta del servidor al cliente
Lado del servidor:
- Todas las palabras ya están encuadradas alfabéticamente
- Si la solicitud del cliente entra por "ove", encuentra todas las palabras que comienzan con ove, ordenados por popularidad
- Devuelve las mejores coincidencias con el cliente
Hay un excelente selector de país de código abierto en el artículo de Smashing Magazine (enlace a continuación) que incluye una discusión sobre los desafíos de usabilidad con soluciones simples de autocompletar y los corrige.
Aunque soy UX, no Dev, estoy seguro de que un desarrollador inteligente podría adaptar este código de código abierto para manejar otros tipos de selecciones, no solo los nombres de países. :)
El artículo que describe los problemas de usabilidad que resuelve este selector .
La demo y la descarga de código abierto . ¡Intentalo!
Descargo de responsabilidad: no tengo conexión con las personas que hicieron este selector de país. Lo sé por casualidad, y me gusta compartir información sobre Usabilidad con los desarrolladores, FWIW.
¿Qué tecnología hay detrás de ellos?
En caso de que se pregunte qué estructura de datos se está utilizando debajo se llama " trie " y para usar menos espacio en comparación con los intentos, puede usar "DAFSA".
¿Cómo trabajan?
ambos se implementan como un árbol, donde cada nodo de árbol corresponde a un carácter en una cadena y el carácter que aparece antes es padre del personaje que aparece más tarde, por ejemplo, las cadenas "tocar", "tocar", "arriba" y "arriba" "almacenado en un Trie (izquierda) y un DAFSA (derecha), de modo que cuando empiece a teclear ... el árbol se recorre en función de los caracteres escritos y muestra las sugerencias según el peso asignado a cada palabra, se puede asignar un peso basado en la frecuencia de uso de la palabra.
Buscar la cuerda en el peor de los casos es el tiempo O (m) donde m es la longitud de la cuerda.
La imagen está siendo referenciada desde el articulo de wikipedia: DAFSA , trie
Esto se hace con el uso de AJAX, este sitio tiene un buen tutorial: AJAX Suggest Tutorial , y la versión de WaybackMachine, ya que el sitio web parece no funcionar .
Una base de datos con palabras clave y un poco de código es todo lo que hay, hasta donde yo sé.
Estoy aprendiendo cómo usarlo en este momento en realidad, para el trabajo. :)
Otro recurso es w3schools . Ellos lo han cubierto también.