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

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

2 голосов
/ 10 февраля 2010

Фон

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

Проблемы

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

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

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

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

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

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

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

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

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

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

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

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

1 Ответ

0 голосов
/ 29 декабря 2010

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

Вот пример 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 не загружается. Просто мысль.

...