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>
<option value="6" selected="">ого</option>
<option value="7" selected="">a</option>
<option value="8" selected="">aaa</option>
<option value="9" selected="">dsdsdsd</option>
<option value="10" selected="">1</option>
<option value="11" selected="">2</option>
<option value="12" selected="">1111</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>

CSS

.choices {
  margin:700px 0!important;
}

JavaScript

const elements = Array.from(
    document.querySelectorAll('select'),
    element => new Choices(element, {
     searchEnabled: false,
     searchChoices: false,
    })
  );

document.addEventListener("keyup", customSearchChoices)


function customSearchChoices(event) {
  const target = document.querySelector(".choices.is-open")
  if (!target) return;

  const type = event.target.closest(".choices")?.getAttribute("data-type") // в мультиселекте таргет будет на инпуте, а не на .choices
  if (type === "select-multiple" && event.key === "Backspace") spechialInSearch(target); // фикс для мультиселекта
  if (type !== "select-one") return

  const key = event.key.toLowerCase();
  const options = Array.from(event.target.querySelectorAll(".choices__list--dropdown .choices__item"));
  selectOne()

  // при сворачивании выпадающего списка удаляем все классы
  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 selectOne() {
    // ищем опции, которые начинаются на искомую букву
    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
    });

    let target;

    // если это была последняя искомая опция, а все остальные уже были выделяемые, то в else нужно убрать все классы и начать с первой
    if (choices.length) {
      target = highlighted(choices)
    } else {
      options.forEach((text) => text.classList.remove("-is-highlighted", "is-highlighted"));
      const...