Fuente de datos desplegable HTML Form

  • Soy consciente de que este es un tema discutido muchas veces, sin embargo, no puedo encontrar lo que estoy buscando.

Pregunta: ¿Cuál es la mejor práctica en estos días como fuente de datos para los cuadros desplegables dinámicos, p. un usuario selecciona una marca de auto en el menú desplegable # 1 y una descripción general de todos los modelos disponibles está disponible en el menú desplegable # 2?

Personalmente, veo tres escenarios, y Google no me ayuda a encontrar la mejor práctica:

  1. Consulta una base de datos sobre el cambio del menú desplegable # 1, haz que JS actualice # 2 con los modelos disponibles.
  2. Consulta un archivo plano (JSON, XML, ...) y actualiza JS # 2 con los modelos disponibles.
  3. Cargue todos los datos a la vez, haga que JS administre las selecciones.

Este caso se trata de datos más o menos estáticos, por lo que un archivo plano podría generarse todas las noches sin problemas.

Desde una perspectiva de rendimiento, considero 3 el menos favorito, sin embargo, entre 1 y 2 no estoy seguro de las optimizaciones actuales de la base de datos y el ancho de banda disponible.

Mi principal preocupación es la experiencia del usuario final.

¡Gracias!

0
Hay todo tipo de enfoques válidos para este tipo de problema, que depende mejor de todo tipo de factores impulsados ​​principalmente por sus circunstancias.
agregado el autor Ant P, fuente
Dependiendo de la cantidad de datos. Sin embargo, por simplicidad, preferiría generar todos los datos en la página, ya sea en un menú desplegable con múltiples niveles o múltiples listas desplegables que se muestran y ocultan según la primera opción.
agregado el autor Kim T, fuente

1 Respuestas

Yo diría que depende de cada caso.

Siempre debe estar listo para que sus datos crezcan; pero debes saber cómo debería crecer. Además, si su cliente y la lógica del lado del servidor están bien implementados, consultar un par de cientos de registros no es algo que tarde demasiado.

Detener para hacer una matemática rápida: consulta de algunos nombres en una base de datos. El DB tiene 5k registros que están bien indexados. de estos 5k, solo 300 satisfacen sus criterios. Entonces, devolvamos estos 300 nombres que tienen una longitud promedio de 50 caracteres. Tienes alrededor de 15kb de información transferida. Eso tomaría menos de medio segundo para ser recibido en una conexión de red común hoy en día.

Sin embargo, para la Experiencia del Usuario, tener que navegar por una Lista desplegable para un nombre en trescientos no es realmente agradable. Por lo tanto, podría ser una buena idea sustituir la lista desplegable por un cuadro de texto de autocompletar. ¿Quieres mejorar aún más el UX? Implemente una lógica de preferencias para saber qué nombre es más probable que elija el usuario (tal vez en función de sus entradas anteriores y/o la entrada de otros usuarios los últimos días, los nombres más populares, ya sabe).

Si su principal preocupación es la experiencia del usuario, debe pensar como el usuario que tiene la experiencia. Intenta pensar así:

  • ¿Qué sería mejor? ¿Una lista desplegable con unas cien entradas o un cuadro de texto con una función de autocompletar?
  • Tal vez la autocompleta dejará al usuario un poco despistado, ¿qué tal una pequeña lista de algunos ejemplos al lado del Textbox?
  • Y aún mejor, ¿y si los ejemplos fueran realmente los que probablemente elegiría?

Volviendo a la pregunta, hacer consultas repetitivamente puede ser costoso, por lo que un pequeño almacenamiento en caché sería agradable. Con SessionStorage y LocalStorage de Html5, es realmente fácil de hacer. Además, hacer un seguimiento de algunas tablas en un IndexedDB también podría ser una buena idea, ¿no?

La mejor práctica para User Experience es pensar qué hará que el usuario esté satisfecho. Trata de sacarle el máximo provecho.

0
agregado
JavaScript - Comunidad española
JavaScript - Comunidad española
4 de los participantes

En este grupo hablamos de JavaScript. Partner: es.switch-case.com