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(e) {
if (!event.target.matches(".choices.is-focused.is-open")) return;
// убираем лишние пробелы
(function() {
const choices = Array.from( event.target.querySelectorAll(".choices__list--dropdown .choices__item") )
choices.forEach(e => e.textContent = e.textContent.replace(/\s+/g, ' ').trim())
})();
const key = event.key.toLowerCase();
const options = Array.from( event.target.querySelectorAll(".choices__list--dropdown .choices__item"));
const choices = options.filter((text) => text.textContent.toLowerCase().startsWith(key));
console.log(options);
if(choices.length) {
let index = (choices.findIndex((selected) => selected.matches(".is-highlighted")) + 1) % choices.length;
choices[index].classList.add("is-highlighted")}
}