Раскрывающиеся списки с 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 не делает нагрузка.Просто мысль.