HTML-Formular-Dropdown-Datenquelle

  • Ich bin mir bewusst, dass dies ein Thema ist, das oft diskutiert wird, aber ich kann nicht finden, wonach ich suche.

Frage: Was ist heutzutage die beste Vorgehensweise als Datenquelle für dynamische Dropdown-Boxen, z. ein Benutzer wählt eine Fahrzeugmarke in Drop-down # 1 aus und eine Übersicht aller verfügbaren Modelle wird in Drop-down # 2 verfügbar?

Persönlich sehe ich drei Szenarien, und Googeln hilft mir nicht, die beste Praxis zu finden:

  1. Abfrage einer Datenbank bei Änderung von Drop-down # 1, JS refresh # 2 mit verfügbaren Modellen.
  2. Abfrage einer Flatfile (JSON, XML, ...), JS refresh # 2 mit verfügbaren Modellen.
  3. Laden Sie alle Daten auf einmal, lassen Sie JS die Auswahl verwalten.

In diesem Fall handelt es sich um mehr oder weniger statische Daten, so dass eine Flatfile jede Nacht ohne Probleme generiert werden konnte.

Aus Performance-Sicht halte ich 3 für am wenigsten favorisiert, aber zwischen 1 und 2 bin ich mir nicht sicher mit den heutigen Datenbank-Optimierungen und der verfügbaren Bandbreite.

Mein Hauptanliegen ist die Benutzererfahrung.

Vielen Dank!

0
Es gibt alle Arten von gültigen Ansätzen für diese Art von Problem, die am besten von allen Arten von Faktoren abhängt, die in erster Linie von Ihren Umständen getrieben werden.
hinzugefügt der Autor Ant P, Quelle
Abhängig von der Datenmenge. Der Einfachheit halber bevorzuge ich jedoch die Ausgabe aller Daten auf der Seite, entweder in einem Dropdown-Menü mit mehreren Ebenen oder mehreren Dropdown-Menüs, die auf der Grundlage der ersten Auswahl angezeigt und ausgeblendet werden
hinzugefügt der Autor Kim T, Quelle

1 Antworten

Ich würde sagen, es kommt auf jeden Fall an.

Sie sollten immer bereit sein, dass Ihre Daten wachsen; aber du solltest wissen, wie es wachsen soll. Wenn Ihre Client- und serverseitige Logik gut implementiert ist, ist die Abfrage von ein paar hundert Registern nicht wirklich lang.

Stoppen Sie, um eine schnelle Mathematik zu tun: Abfrage für einige Namen in einer Datenbank. Die DB hat 5k Datensätze, die gut indiziert sind. von diesen 5k erfüllen nur 300 Ihre Kriterien. Also, lassen Sie uns diese 300 Namen zurückgeben, die durchschnittlich 50 Zeichen lang sind. Sie haben ungefähr 15kb von Informationen, die übertragen werden. Das würde heute weniger als eine halbe Sekunde dauern, um in einer gemeinsamen Netzwerkverbindung empfangen zu werden.

Für User Experience ist es jedoch nicht schön, eine Drop-Down-Liste nach einem Namen in dreihundert zu durchsuchen. Daher könnte es eine gute Idee sein, die Dropdown-Liste für eine Auto-Vervollständigen-Textbox zu ersetzen. Willst du die UX noch mehr verbessern? Implementieren Sie eine Präferenzlogik, um zu wissen, welchen Namen der Benutzer am ehesten wählen wird (möglicherweise basierend auf seinen früheren Eingaben und/oder den Eingaben anderer Benutzer in den letzten Tagen - die Trendnamen, die Sie kennen).

Wenn Ihr Hauptanliegen die Benutzererfahrung ist, müssen Sie wie der Benutzer denken, der die Erfahrung hat. Versuche so zu denken:

  • Was wäre schöner? Eine Dropdown-Liste mit einigen hundert Einträgen oder eine Textbox mit einer Auto-Vervollständigen-Funktion?
  • Vielleicht wird die automatische Vervollständigung dem Benutzer ein wenig ratlos sein, also wie wäre es mit einer kleinen Liste einiger Beispiele neben der Textbox?
  • Und noch besser, was wäre, wenn die Beispiele tatsächlich diejenigen wären, die ich wahrscheinlich aussuchen würde?

Wenn wir auf die Frage zurückkommen, können Abfragen, die wiederholt durchgeführt werden, teuer sein, daher wäre ein wenig Caching nett. Mit Html5 SessionStorage und LocalStorage ist das sehr einfach. Außerdem könnte es auch eine gute Idee sein, einige Tabellen in einer IndexedDB im Auge zu behalten, oder?

Die beste Vorgehensweise für die Benutzererfahrung besteht darin, darüber nachzudenken, was den Benutzer zufriedenstellen wird. Versuchen Sie, das Beste daraus zu machen.

0
hinzugefügt
JavaScript - Deutsche Gemeinschaft
JavaScript - Deutsche Gemeinschaft
3 der Teilnehmer

In dieser Gruppe sprechen wir über JavaScript.