Как сделать поиск по опциям в селекте?

Question

[uRoot]

Есть селект с опциями:

<select id="group_id_170" name="group_id" class="mySelect choices__input is-hidden" tabindex="-1" aria-hidden="true" data-choice="active">
<option class="is-highlighted" value="0" selected="">Админ</option>
<option value="1" selected="">Обратная связь</option>
<option value="2" selected="">Обратная</option>
<option value="3" selected="">О</option>
<option value="4" selected="">Связь</option>
<option value="5" selected="">С</option>
</select>

На селекте висит событие keyup. Мне необходимо когда юзер кликнул на селект и нажал какую-то букву на клавиатуре, подсветить опцию, которая начинается на эту букву (у которой textContent[0] === event.key). Но только одну. Если он снова нажал эту же букву, то подсветить следующую опцию, а с предыдущей убрать выделение (убрать класс is-highlighted).

Есть уже готовая логика, которая усложняет решение: при клике на селект у первой опции уже будет висеть класс is-highlighted, навели мышь на другую опцию - у первой класс удалился, на наведённый навесился - селекты обрабатывает библиотека choices.js

Песочиница: https://jsfiddle.net/qokp6g1e/4/

Answer 1

[Дмитрий]

let key, count
const select = document.getElementById('group-id-170')
window.addEventListener('keyup', e => {
   const k = e.key.toUpperCase()
   if (k === key) count++ 
   else {
      key = k
      count = 0
   }
   
   const highlighted = select.querySelector('.is-highlighted')
   if (highlighted) {
      highlighted.classList.toggle('is-highlighted')
   }
   
   const el = Array.from(select.querySelectorAll('option')).filter(el => 
      el.innerText[0].toUpperCase() === key   
   )[count]
   if (el) el.classList.toggle('is-highlighted')
})

Comments

[uRoot]

Спасибо, но пока не работает как нужно: https://jsfiddle.net/b0dsfq1m/

Только один подсвечивает и всё.

[uRoot]

Я сделаль: https://jsfiddle.net/g54eLdnb/