Widget:Agatha-test: mudanças entre as edições

Ir para navegação Ir para pesquisar
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 14: Linha 14:
   </select>
   </select>
</div>
</div>
<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>

Menu de navegação