Lista suspensa Pesquisável

Olá, Gustavo! Tudo bem com você?

Vou te mostrar um exemplo bem simples de como você pode fazer isso. Primeiro, vamos criar a estrutura HTML para a lista suspensa:

<div class="dropdown">
  <input type="text" placeholder="Pesquisar.." id="myInput" onkeyup="filterFunction()">
  <div id="myDropdown" class="dropdown-content">
    <a href="#about">Sobre</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contato</a>
    <a href="#custom">Custom</a>
    <a href="#support">Suporte</a>
    <a href="#tools">Ferramentas</a>
  </div>
</div>

Agora, vamos adicionar algum estilo CSS para torná-lo mais agradável:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

Finalmente, vamos adicionar a funcionalidade JavaScript para tornar a lista suspensa pesquisável:

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

Essa função JavaScript irá filtrar as opções da lista suspensa com base no que o usuário digitar na caixa de pesquisa.

Lembre-se que este é um exemplo básico e pode não atender a todas as suas necessidades, mas espero que sirva como um bom ponto de partida para você.

Espero ter ajudado e caso tenha mais perguntas ou dúvidas acerca deste tópico, estarei à disposição.

Grande abraço e bons estudos!