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

Question

Мне нужны ваши ценные советы и рекомендации, которые помогут мне выбраться из этой сложной ситуации.

У меня есть сценарий, где мне нужно построить раскрывающееся окно, как показано ниже.

<ul class="dropdown"> 
<li><a href="#">America</a></li> 
<li><a href="#">Brazil</a></li> 
<li><a href="#">China</a></li> 
<li><a href="#">Denmark</a></li> 
<li><a href="#">Egypt</a></li> 
</ul> 

Желаемая функциональность, что я должен быть в состоянии использовать ввод с клавиатуры для прокрутки пунктов, позволяет сказать, что я нажать клавишу «E» на моей клавиатуре она должна парить/сосредоточиться на Египет.

Я понимаю, что эта функциональность невозможна с использованием UL> Li. Однако мы можем использовать тег Select для реализации этой функции.

<select class="dropdown"> 
<option>America</li> 
<option>Brazil</li> 
<option>China</li> 
<option>Denmark</li> 
<option>Egypt</li> 
<select> 

Но когда мы используем выбор тег, мы не можем стилизовать ниспадающее меню, особенно, как CSS обивка не работает на некоторых выпадающих тег на большинстве broswers.

Все, что я хочу спросить, как я могу построить выпадающий с этими 3 функциональностей:

1.Open on Tab key press 
2.Browse listed items using key input. 
3.Style the dropdown for cross broswer compatibility. 

Я потратить достаточно времени найти решение этой онлайн, я вмятина найти идеальное решение, кроме от этого плагина

https://silviomoreto.github.io/bootstrap-select/

я с сожалением сказать, что я не разрешено использовать любые внешние модули на work.To достичь этого только инструменты, которые я имею право использовать это Bootstrap, JQuery, JavaScript, CSS, HTML и не могут использовать угловые.

Может ли кто-нибудь мне помочь в этом.

Answer 1

К сожалению, невозможно развернуть выпадающее меню во всех браузерах. Bootstrap Select и другие подобные плагины (например, Chosen) используют JS и пользовательскую разметку для создания faux <select>, что плохо для доступности (см. https://vimeo.com/84970341#t=614s).

Лично я бы использовал элемент <select> и жил с использованием стиля браузера по умолчанию.

Вы, , можете стиль <select>, однако, не переключаясь, не допуская доступа. Просто не выпадающее меню. Вот некоторые примеры:

• http://adam.co/lab/jquery/customselect/
• http://www.456bereastreet.com/lab/custom-select/

Другой вариант мог бы кодировать страны в виде списка ссылок и сделать его расширения с JS. Просто не забудьте добавить соответствующие роли арии.

• http://edenspiekermann.github.io/a11y-toggle/
• http://heydonworks.com/practical_aria_examples/

Answer 2

1.Открыть на клавише Tab.

Открыто по нажатию клавиши Tab ul - очень плохое решение, потому что клавиша Tab выполняет различные функции в окне. Переключатель выпадающего списка будет искажен, так как фокус должен находиться в окне. Если вы используете элемент input, например select, тогда все в порядке.

Тем не менее, я создал небольшой макет, используя ТОЛЬКО javascript, так как вам не разрешено использовать какие-либо внешние библиотеки. Создано с использованием ul. Посмотрите на эту скрипку: JS Fiddle

HTML:

<div> 
    <ul id="dropdown"> 
    <li class='highlight' data-key='A'><a href="#">America</a></li> 
    <li data-key='B'><a href="#">Brazil</a></li> 
    <li data-key='C'><a href="#">China</a></li> 
    <li data-key='D'><a href="#">Denmark</a></li> 
    <li data-key='E'><a href="#">Egypt</a></li> 
    </ul> 
</div> 

CSS:

ul { 
    list-style: none; 
    display: none; 
} 

ul li.highlight { 
    background: yellow; 
} 

Javascript:

document.addEventListener("keydown", keyDownListener, false); 

function keyDownListener(e) { 
    var keyCode = e.keyCode; 
    var dropdwn = document.getElementById('dropdown'); 
    if (keyCode == 9) { 
    dropdwn.style.display = (dropdwn.style.display != 'none' ? 'none' : 'block'); 
    } else if (dropdwn.style.display != 'none') { 
    var items = dropdwn.getElementsByTagName("li"); 
    items[0].classList.remove("highlight"); 
    for (var i = 0; i < items.length; ++i) { 
     var aKey = items[i].dataset.key; 
     if (String.fromCharCode(e.keyCode) === aKey) { 
     for (var j = 0; j < items.length; ++j) { 
      items[j].classList.remove("highlight"); 
     } 
     items[i].classList.add("highlight"); 
     } 
    } 
    } 
} 

Объяснение:

1. Добавить слушателя keydown событий на документе.
2. На прессе Tab ключевое шоу/скрыть выпадающее меню.
3. При нажатии любой другой клавиши, если выпадающий виден, проверьте data-key каждого из li и сопоставьте его с нажатой клавишей. В случае совпадений выделите соответствующий элемент списка.

И снова напоминание, переключение из выпадающего списка ul на Tab нажатия клавиши Больно доступа. Если это раскрывающийся список select, тогда все в порядке.