Используемое иерархическое выпадающее меню в HTML/JavaScript?

Question

У меня проблема с юзабилити.

У меня есть длинный список археологических находок из археологических находок (200+). Когда пользователь отправляет свою находку, он должен выбрать одну категорию из этого списка:

• Бронзового век
• • хозтовары
• • ювелирных изделия
• • Военные
• • • Spears
• • ...
• средневековье
• • Jewlery
• • Религиозные артефакты
• • ...
• WW2
• • Германия
• • • Военный
• • • • Жетоны
• • • • • пехотная
• ...

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

Как сделать его более удобным? Типичные случаи использования 2 являются:

1. Выбор уровень после того, как уровень (первое решение, если это бронзовый век, средние века, ... затем, если это Jewlery, военный, ... затем, если это Spears, ...)
2. Поиск (пользователь знает, что это ожерелье, но не знает, что рано или поздно Средневековье и т.д.)

Как совместить эти два? Существуют ли существующие решения?

Спасибо!

Answer 1

Если это может помочь, разобраться первый случай использования вы можете сделать что-то подобное в вашем HTML:

Age: 
<select name='age' id='age' onchange="showRelevantRuleDropdown(this,1);"> 
    <option value='0'>Bronze Age</option> 
    <option value='1'>Middle Age</option> 
    ... 
</select> 

<select name='BronzeAge' id='BronzeAge' onchange="showRelevantRuleDropdown(this,1);"> 
    <option value='0'>Household tools</option> 
    <option value='1'>Jewelry</option> 
    ... 
</select> 

<select name='MiddleAge' id='MiddleAge' onchange="showRelevantRuleDropdown(this,1);"> 
    <option value='0'>Jewlery</option> 
    <option value='1'>Religious artifacts</option> 
    ... 
</select> 

... 

<script language='JavaScript'> 
showRelevantRuleDropdown(document.getElementById('age'),1); 
</script> 

Использование ниже Javascript:

function showRelevantRuleDropdown(elem, restore) { 
    // Show one SELECT element (elem) between Option 1 or Option 2 
    // If the parameter restore is 1, the hidden element is restored to its default value 
    if (elem.selectedIndex == 0) { 
     document.getElementById('BronzeAge').style.display = 'none'; 
     document.getElementById('MiddleAge').style.display = 'inline'; 
     if (restore == 1) { 
      document.getElementById('BronzeAge').getElementsByTagName('option')['0'].selected = 'selected'; 
     } 
    } 
    else { 
     document.getElementById('MiddleAge').style.display = 'none'; 
     document.getElementById('BronzeAge').style.display = 'inline'; 
     if (restore == 1) { 
      document.getElementById('MiddleAge').getElementsByTagName('option')['0'].selected = 'selected'; 
     } 
    } 
} 

Это работает на одном уровне но может быть легко расширена.

У меня есть код в codepen, если вы хотите использовать его: http://codepen.io/ophintor/pen/FaHbh

Answer 2

Ну, вы можете объединить модель автозаполнения с иерархией, что вам нужно использовать. См. Изображение ниже.

Затем пользователям не нужно искать или перемещаться по всему дереву, чтобы выбрать элемент, который они хотят выбрать, без потери контекста иерархии. Я думаю, что это отвечает передовым потребностям пользователей.

Тем не менее вы должны предоставить способ навигации по дереву (показывая все дерево), чтобы посещать начинающих пользователей. Возможно, это может быть сделано, помещая значок/текстовую ссылку рядом с полем поиска.

К сожалению, я не нахожу что-то подобное реализовано в любом месте.