Dropdowns con 10 mil valores posibles y menús desplegables de secuencia importante frente a degradación elegante

StackOverflow https://stackoverflow.com/questions/2239865

Pregunta

Fondo

Tengo esta forma que utiliza javascript exclusivamente a buscar a través de ~ 5k entradas (proveedores) y poblar un selecto menú desplegable de ellos (fábricas, ~ entradas 10k). En este momento, es una forma javascript necesario. Me gustaría hacerlo de modo que errores de javascript ya no hacen que la forma inutilizable, pero el número de entradas y la naturaleza secuencial de las entradas me dejo sin una forma idiomática para proporcionar sólo una versión HTML básico.

Los Problemas


dropdowns secuencial / jerárquicos

Un ejemplo desplegable donde secuencia es importante: http://www.javascriptkit.com/javatutors/selectcontent2.shtml

Para que muestra "filtrado" de los contenidos desplegable secuencial / jerárquica, donde las selecciones en la segunda ciudad desplegable se filtran sobre la base de las selecciones en el primer desplegable País. Pero quitar el javascript, y podría convertirse instantáneamente en un lío. Madrid, en los EE.UU.? Berlín en Francia? La secuencia se corrompe.

Menús desplegables que tienen un gran número de opciones

Si usted tiene un selecto desplegable con 10k opciones posibles, es bastante fácil de filtrar / buscar a través de ellos con javascript. Tratar con esas opciones sin javacript, por el contrario, es mucho más difícil.

¿Cómo proporcionar a los usuarios con todas las posibilidades cuando acaba de cargar todas las opciones de todas sería hacer estallar su navegador?


Posibles soluciones

secuencial / jerárquica cuadros de selección:

    formas
  • del lado del servidor 2 partes.
  • ? Grupos Seleccione la opción?
  • ???

Selecciona con un gran número de opciones:

  • del lado del servidor formas de búsqueda de 2 partes.
  • Del lado del servidor de búsqueda de texto coincidente de nombres de entrada.
  • ???

enlaces simples a soluciones ingeniosas dan la bienvenida.

¿Fue útil?

Solución

La única solución que se me ocurre es utilizar una forma presentar cada vez que se necesita para limitar los resultados. Se empieza por mostrar una página para seleccionar el país del proveedor. Que presenta, y devuelve una página que muestra el país seleccionado como texto y ahora tiene un menú desplegable para seleccionar el siguiente campo, como las ciudades. De esta manera, el servidor puede hacer el filtrado en cada nivel.

Este es un ejemplo de 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>

Cuando se selecciona un país, la forma se somete. El servidor procesa el país, devuelve la misma página con el valor del campo country y una lista de posibles ciudades para su próxima desplegable. Hacerlo de esta manera le permite depender únicamente de formulario envía (en lugar de JavaScript) para filtrar los datos de forma secuencial. Su servidor se encargará de hacer el seguimiento de qué tan avanzado es el usuario. La caída evidente de esta solución es que su JSP sería bastante desordenado, con todos los bloques <c:choose> anidados.
También puede intentar una solución híbrida: cuando se carga la página, averigüe si su JavaScript ha cargado. Si es así, sustituya los formularios de presentación con HTML plano que tiene AJAX detrás de ella para llenar el siguiente conjunto de opciones. De esa manera, su página no tiene que actualizar un montón de veces cuando el JavaScript hace de carga, pero todavía será funcional si el código JavaScript no carga. Es sólo una idea.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top