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

Widget:Agatha-test (ver código-fonte)

1 328 bytes adicionados , 1 de maio de 2023

sem sumário de edição

993

edições

@@ Linha 14: / Linha 14: @@
    </select>
 </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>