DropDowns com 10 mil valores possíveis de sequência e menus suspensos-importante contra degradação progressiva

Question

Fundo

Eu tenho este formulário que usa JavaScript exclusivamente a pesquisar ~ 5k entradas (fornecedores) e preencher um seleto suspensa a partir deles (fábricas, ~ 10k entradas). Agora, é uma forma exigida-javascript. Eu gostaria de fazer com que erros de javascript não tornar o formulário inutilizável, mas o número de entradas e da natureza seqüencial das entradas me deixar sem uma maneira idiomática para fornecer apenas uma versão HTML básico.

As questões

---

Sequential / hierárquica dropdowns

Um exemplo suspensa, onde é importante sequência: http://www.javascriptkit.com/javatutors/selectcontent2.shtml

Para que mostra "filtragem" de seqüencial / hierárquica suspensa conteúdo, onde as seleções na segunda cidade suspensa são filtrados com base nas selecções no primeiro suspensa País. Mas tirar o javascript, e que poderia instantaneamente se tornar uma bagunça. Madrid nos EUA? Berlim na França? A seqüência se torna corrompido.

Dropdowns que têm um grande número de opções

Se você tem um seleto dropdown com 10k opções possíveis, é muito fácil para filtrar / procurar através deles com javascript. Lidar com essas opções sem Javacript, por outro lado, é muito mais difícil.

Como você fornecer seus usuários com todas as possibilidades quando apenas carregam todas as opções-los todos seria explodir o seu navegador?

---

Possíveis soluções

sequencial / hierárquica caixas de seleção:

• do lado do servidor formas 2-parte.
• ? Seleccione grupos de opções?
• ???

Seleciona com um grande número de opções:

• do lado do servidor formulários de pesquisa 2 partes.
• do lado do servidor pesquisa de texto correspondência de nomes de entrada.
• ???

simples links para soluções engenhosas bem-vindos.

Answer 1

A única solução que eu posso pensar é usar um formulário de envio cada vez que você precisa diminuir os seus resultados. Você começa por mostrar uma página para selecionar país do fornecedor. Que submete, e retorna uma página que mostra o país selecionado como texto e agora tem um drop-down para selecionar o próximo campo, como cidades. Dessa forma, o servidor pode fazer a filtragem em cada nível.

Aqui está um exemplo 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>

Quando você seleciona um país, os submete o formulário. O servidor processa o país, retorna a mesma página com o valor do campo country e uma lista de possíveis cidades para a sua próxima drop-down. Fazê-lo como esta permite-lhe contar apenas com submete o formulário (em vez de JavaScript) para filtrar dados sequencialmente. Seu servidor seria responsável por manter o controle de quanto tempo o usuário está. A queda óbvia desta solução é que o seu JSP seria bastante confuso, com todos os blocos <c:choose> aninhadas.
Você também pode tentar uma solução híbrida: quando a página é carregada, descobrir se o seu JavaScript foi carregado. Se assim for, substituir seus formulários de apresentação com HTML simples que tem AJAX por trás dele para preencher o conjunto de opções seguinte. Dessa forma, sua página não tem que atualizar um monte de vezes quando o JavaScript faz de carga, mas ainda será funcional se o JavaScript não carga. Apenas um pensamento.