Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > вывод длинных списков

Автор: anti_snayper 19.6.2010, 15:44

Нужно вывести на странице длинный списков, до 500 элементов. Предполагалось вывести его в виде выпадающего списка. Но при таком объеме это явно не презентабельно и не удобно. Существуют ли стандартные подходы на такие случаи?

P.S. есть идея сделать фильтрацию наподобие гугловской по вводимым символам, только не знаю как все это сделать отобразить.

Заранее спасибо.

Автор: skyboy 19.6.2010, 16:05

это список чего? неужели нельзя полный список разделить на некие категории, как, например, список городов разбить по областям?
если уж действительно никак, то тогда действительно можно использовать поиск по уже введенным символам. такой механизм называется "рекомендацией"(suggetion) и состоит из двух частей: клиентской на javascript, которая передает серверной части уже введенные символы, а после ответа сервера выводит список найденных элементов. Серверная часть же просто будет искать в полном списке элементы, содержащие переданную строку и возвращать отформатированный список предположений.

Автор: Mavrun 19.6.2010, 16:51

с автозаполнением список выпадающий надо.
вот хороший пример
http://www.xiper.net/html-and-css-tricks/verstka-form/nice-select-jquery.html

Автор: anti_snayper 19.6.2010, 16:57

Это понятно, вопрос в другом: как лучше клиентскую часть сделать чтобы и смотрелось хорошо и использовать было удобно?

Автор: skyboy 19.6.2010, 17:30

что в твоем понимании "удобно"? ты просишь ссылки на примеры реализации такого?
если нет, то чем упомянутый google suggestion не устраивает?

Автор: anti_snayper 19.6.2010, 17:53

У меня есть список из 500 элементов, пользователю нужно предоставить выбор одного из них и сохранить результат в базу.
Google suggestion основан на простом текстовом поле, в которое можно вбить что угодно. И не факт что пользователь введет один из возможных 500 вариантов.

Автор: bars80080 19.6.2010, 19:41

Цитата(anti_snayper @ 19.6.2010, 17:53

)

И не факт что пользователь введет один из возможных 500 вариантов.

значит бить 500 позиций по группам, и предоставлять пользователю вначале выбрать группу, а затем уже конкретный пункт (два селекта)

если расскажешь, что за пункты, то может быть поможем, как их тематически разбить

Автор: anti_snayper 19.6.2010, 22:23

Пишу web-систему расписания для ВУЗа... Вообще таких списков на странице несколько. Все кроме одного можно бить на группы и как-то более-менее удобно отображать. Последний - список дисциплин бить не по чему. И в нем ~500 предметов.
Пока это самое простое из того что нашел в нете:

Код


<HTML><HEAD><script type="text/javascript">
function searchSel() {
  var input=document.getElementById('realtxt').value.toLowerCase();
  var output=document.getElementById('realitems').options;
  for(var i=0;i<output.length;i++) {
    if(output[i].value.indexOf(input)==0){
      output[i].selected=true;
      }
    if(document.forms[0].realtxt.value==''){
      output[0].selected=true;
      }
  }
}
</SCRIPT></HEAD><BODY>
<FORM>
Search <input type="text" id="realtxt" onkeyup="searchSel()">
<SELECT id="realitems">
<OPTION value="">Select...
<OPTION value="afghanistan">Afghanistan
<OPTION value="albania">Albania
<OPTION value="algeria">Algeria
<OPTION value="andorra">Andorra
<OPTION value="angola">Angola
</SELECT>
</FORM></BODY></HTML>

Взято с http://www.rgagnon.com/jsdetails/js-0089.html
Это в своем роде аналог google suggest... Скорее всего возьму за основу добавив ajax.

P.S. может все-таки есть более элегантное решение? не хочется использовать 2 элемента для получения одного значения.
Тем более что у меня таких списков несколько.

Автор: bars80080 20.6.2010, 01:32

бить по кафедрам. все дисциплины имеют базирование по определённым кафедрам

Автор: FightInGlory 20.6.2010, 10:50

Правильно человек говорит. Можно разбить по кафедрам, кафедры на курсы(года), затем на группы (или сразу на группы). Таким образом получится многоуровневое меню. По нажатию на конкретную группы в окне будет появляться само расписание. И в принципе это можно выполнить и без программирования, лишь маленький ява скрипт для корректного отображения самого меню. Если расписания в разных файлах, то с ссылками играешься, если в одном ставишь якорь.