JSFiddle - React, Tailwind, and code Playground
HTML
<select id="group_id_170" name="group_id" class="mySelect">
<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>
<link rel="stylesheet" href="https://joshuajohnson.co.uk/Choices/assets/styles/choices.min.css" />
<script src="https://joshuajohnson.co.uk/Choices/assets/scripts/choices.min.js"></script>
JavaScript
const elements = Array.from(
document.querySelectorAll('select'),
element => new Choices(element, {
searchEnabled: false,
searchChoices: false,
})
);
document.addEventListener("keyup", customSearchChoices)
function customSearchChoices(event) {
if (!event.target.matches(".choices.is-focused.is-open")) return;
const key = event.key.toLowerCase();
const options = Array.from( event.target.querySelectorAll(".choices__list--dropdown .choices__item"));
// ищем опции, которые начинаются на искомую букву
const choices = options.filter((text) => {
text.textContent = text.textContent.replace(/\s+/g, ' ').trim() // убираем лишние пробелы
if (text.textContent.toLowerCase().startsWith(key) && !text.matches(".-is-highlighted")) return text
});
// если это была последняя искомая опция, а все остальные уже были выделяемые, то в else нужно убрать все классы и начать с первой
if(choices.length) {
highlighted(choices)
} else {
options.forEach((text) => text.classList.remove("-is-highlighted", "is-highlighted"));
const choices = options.filter((text) => text.textContent.toLowerCase().startsWith(key) && !text.matches(".-is-highlighted"));
highlighted(choices)
}
// при сворачивании выпадающего списка удаляем все классы
event.target.removeEventListener("hideDropdown", removeClass)
event.target.addEventListener("hideDropdown", removeClass)
// ф-ция для удаления классов при сворачивании выпадабщего списка
function removeClass(event) {
const choices = event.target.closest(".choices").querySelectorAll(".choices__list--dropdown .choices__item")
choices.forEach(element => element.classList.remove("-is-highlighted", "is-highlighted"))
}
// подсвечиваем опцию, если нашли нужную
function highlighted(choices) {
let index = (choices.findIndex((selected) => selected.matches(".-is-highlighted")) + 1);
...