Раскрытия с 10 тысячами возможных значений и важными для последовательности выпадающими списками в сравнении с изящной деградацией

Question

Фон

У меня есть эта форма, которая использует javascript исключительно для поиска по ~5 тыс. Записей (поставщики) и заполнения выпадающего списка из них (фабрики, ~10 тыс. Записей). Прямо сейчас это форма, необходимая для JavaScript. Я хотел бы сделать так, чтобы ошибки JavaScript больше не делали форму непригодной для использования, но количество записей и последовательный характер записей оставляют меня без идиоматического способа предоставить только базовую HTML-версию.

Проблемы

---

Последовательные / иерархические выпадающие

Пример раскрывающегося списка, в котором важна последовательность: http://www.javascriptkit.com/javatutors/selectcontent2.shtml

Таким образом, показана "фильтрация" последовательного / иерархического раскрывающегося содержимого, при котором выборки во втором раскрывающемся списке "Город" фильтруются на основе выборок в первом раскрывающемся списке "Страна". Но уберите javascript, и он может сразу превратиться в беспорядок. Мадрид в США? Берлин во Франции? Последовательность становится поврежденной.

Выпадающие, которые имеют огромное количество вариантов

Если у вас есть выпадающий список с 10 тысячами возможных вариантов, довольно легко отфильтровать / найти их с помощью javascript. С другой стороны, работать с этими опциями без javacript гораздо сложнее.

Как вы предоставляете своим пользователям все возможности, когда просто загружая все опции, они все взорвут их браузер?

---

Возможные решения

Последовательные / иерархические поля выбора:

• Серверные формы из двух частей.
• ? Выберите вариант группы?
• ???

Выбирает с огромным количеством опций:

• Серверные двухкомпонентные формы поиска.
• Соответствие текстового поиска на стороне сервера именам записей.
• ???

Простые ссылки на находчивые решения приветствуются.

Answer 1

Единственное решение, которое я могу придумать, - это использовать форму отправки каждый раз, когда вам нужно сузить результаты. Вы начинаете с показа страницы, чтобы выбрать страну поставщика. Это отправляет и возвращает страницу, которая показывает выбранную страну в виде текста и теперь имеет раскрывающийся список для выбора следующего поля, например города. Таким образом, сервер может выполнять фильтрацию на каждом уровне.

Вот пример 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>

Когда вы выбираете страну, форма отправляется. Ваш сервер обрабатывает страну, возвращает ту же страницу с country значение поля и список возможных городов для вашего следующего выпадающего списка. Делая это так, вы можете полагаться только на отправку формы (а не JavaScript) для последовательной фильтрации данных. Ваш сервер будет отвечать за отслеживание того, как далеко находится пользователь. Очевидным недостатком этого решения является то, что ваш JSP будет довольно грязным, со всеми вложенными <c:choose> блоки.

Вы также можете попробовать гибридное решение: когда страница загружается, узнайте, загружен ли ваш JavaScript. Если это так, замените ваши формы представления простым HTML, за которым стоит AJAX, чтобы заполнить следующий набор параметров. Таким образом, ваша страница не должна обновляться несколько раз, когда JavaScript загружается, но все равно будет работать, если JavaScript не загружается. Просто мысль.