Dropdowns avec 10 mille valeurs possibles et dropdowns de séquence importante contre la dégradation progressive

Question

Arrière-plan

J'ai cette forme qui utilise javascript exclusivement pour la recherche par le biais ~ 5k entrées (fournisseurs) et remplir un menu déroulant de sélection d'eux (usines, les entrées de ~ 10k). En ce moment, il est une forme nécessaire javascript. Je voudrais faire en sorte que des erreurs javascript ne rendent la forme inutilisable, mais le nombre d'entrées et de la nature séquentielle des entrées me laisse sans un moyen idiomatiques de fournir juste une version html de base.

Les questions

---

dropdowns séquentiel / hiérarchiques

Un exemple déroulant où la séquence est importante: http://www.javascriptkit.com/javatutors/selectcontent2.shtml

Alors que montre « filtrage » du contenu déroulant séquentiel / hiérarchique, où les sélections dans la deuxième ville déroulant sont filtrés en fonction des sélections dans le premier menu déroulant Pays. Mais enlever le javascript, et il pourrait devenir instantanément un gâchis. Madrid aux Etats-Unis? Berlin en France? La séquence est corrompu.

Dropdowns qui ont un très grand nombre d'options

Si vous avez un menu déroulant, sélectionnez avec 10k options possibles, il est assez facile de filtrer / recherche à travers eux avec javascript. Faire face à ces options sans javacript, d'autre part, est beaucoup plus difficile.

Comment fournir à vos utilisateurs toutes les possibilités lors du chargement juste toutes les options tous soufflerait leur navigateur?

---

Solutions possibles

boîtes séquentielle / hiérarchique Sélectionnez:

• côté serveur formulaires 2 parties.
• ? Sélectionner les groupes d'options?
• ???

Sélectionne avec un très grand nombre d'options:

• côté serveur formulaires de recherche 2 parties.
• recherche de texte côté serveur correspondant des noms d'entrée.
• ???

Liens simples à des solutions de ressources sont les bienvenus.

Answer 1

La seule solution que je peux penser est d'utiliser un formulaire soumettre chaque fois que vous devez limiter vos résultats. Vous commencez en montrant une page pour sélectionner le pays d'un fournisseur. Qui présente et renvoie une page qui montre le pays sélectionné sous forme de texte et a maintenant un menu déroulant pour sélectionner le champ suivant, comme des villes. De cette façon, le serveur peut faire le filtrage à chaque niveau.

Voici un exemple JSP:

<c:choose>
    <c:when test="${empty country}">
        Country: 
        <form>
            <select>
                <option value="USA">America</option>
                <option value="DEU">Germany</option>
                <%-- ... --%>
            </select>
        </form>
    </c:when>
    <c:otherwise>
        Country: ${country} 
        <c:choose>
            <c:when test="${empty city}">
                <input type="submit" value="Change" />   <%-- Button to change the previous value --%>

                <%-- your form for choosing a supplier's city --%>                    
            </c:when>
            <c:otherwise>
                <%-- continue filtering until you have all of the data --%>
            </c:otherwise>
        </c:choose>

    </c:otherwise>
<c:choose>

Lorsque vous sélectionnez un pays, la forme soumet. Votre serveur traite le pays, retourne la même page avec la valeur du champ de country et une liste des villes possibles pour votre prochain menu déroulant. Faire comme cela vous permet de se fonder uniquement sur Transmet le formulaire (plutôt que JavaScript) pour filtrer les données de manière séquentielle. Votre serveur sera chargé de garder une trace de la distance le long de l'utilisateur. La chute évidente de cette solution est que votre JSP serait assez désordonné, avec tous les blocs de <c:choose> imbriqués.
Vous pouvez également essayer une solution hybride: quand la page se charge, savoir si votre JavaScript a été chargé. Le cas échéant, remplacer vos formulaires de soumission avec HTML brut qui a AJAX derrière pour alimenter la prochaine série d'options. De cette façon, votre page n'a pas de rafraîchir un tas de fois lorsque le JavaScript Finalité charge, mais sera toujours fonctionnel si le JavaScript ne pas charge. Juste une pensée.