Есть селект с опциями:
<select id="group_id_170" name="group_id" class="mySelect choices__input is-hidden" tabindex="-1" aria-hidden="true" data-choice="active">
<option value="771" selected="">Обратная связь</option>
<option value="772" selected="">Обратная</option>
<option value="773" selected="">Связь</option>
</select>
При клике на селект и вводе буквы с клавиатуры (событие keyup) должен срабатывать поиск по опциями, по первой букве опции и подсветке найденой. Но подсвечивать нужно только первую найдённую, а если юзер снова введёт эту же букву, то уже подсветить нужно вторую найденную и так дале. Поиск нужно зациклить. То есть если больше опций нет, то вернуться нужно в начало и подсветить первую.
Как можно подобное реализовать?
У меня есть следующее:
const select = event.target.querySelector("select")
const choices = Array.from( event.target.querySelectorAll("option") )
choices.forEach(e => e.textContent = e.textContent.replace(/\s+/g, ' ').trim()) // убираем лишние пробелы
const filtred = choices.filter(e => e.textContent[0].toLowerCase().includes(searchValue)) // все найденные
P.S опции обрабатываются библиотекой choices.js и первая опция по умолчанию уже выделенна, класс
is-highlighted