Widget:Agatha-test

 <input type="text" placeholder="Buscar opção" class="search-box">
 <select name="options" class="options-list">
   <option value="option1">Opção 1</option>
   <option value="option2">Opção 2</option>
   <option value="option3">Opção 3</option>
   <option value="option4">Opção 4</option>
   <option value="option5">Opção 5</option>
   <option value="option6">Opção 6</option>
   <option value="option7">Opção 7</option>
   <option value="option8">Opção 8</option>
   <option value="option9">Opção 9</option>
   <option value="option10">Opção 10</option>
 </select>

<script> const searchBox = document.querySelector('.search-box'); const optionsList = document.querySelector('.options-list');

// Mostra as opções que correspondem à pesquisa searchBox.addEventListener('input', () => {

 const searchValue = searchBox.value.toLowerCase();
 const options = optionsList.options;
 
 for (let i = 0; i < options.length; i++) {
   const optionValue = options[i].text.toLowerCase();
   
   if (optionValue.indexOf(searchValue) !== -1) {
     options[i].classList.remove('hide');
   } else {
     options[i].classList.add('hide');
   }
 }
 
 const visibleOptions = [...options].filter(option => !option.classList.contains('hide'));
 
 if (visibleOptions.length > 0) {
   optionsList.classList.add('show');
 } else {
   optionsList.classList.remove('show');
 }

});

// Esconde as opções quando o usuário clica fora da caixa de seleção document.addEventListener('click', event => {

 const target = event.target;
 
 if (!target.closest('.select-box')) {
   optionsList.classList.remove('show');
 }

});

// Seleciona a opção quando o usuário clica nela optionsList.addEventListener('change', () => {

 const selectedOption = optionsList.options[optionsList.selectedIndex];
 searchBox.value = selectedOption.text;
 optionsList.classList.remove('show');

});

</script>