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

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
<div class="select-box">
<div class="select-box">
  <input type="text" placeholder="Buscar opção" class="search-box">
        <div class="options-container">
  <select name="options" class="options-list">
          <div class="option">
    <option value="option1">Opção 1</option>
            <input
    <option value="option2">Opção 2</option>
              type="radio"
    <option value="option3">Opção 3</option>
              class="radio"
    <option value="option4">Opção 4</option>
              id="automobiles"
    <option value="option5">Opção 5</option>
              name="category"
    <option value="option6">Opção 6</option>
            />
    <option value="option7">Opção 7</option>
            <label for="automobiles">Automobiles</label>
    <option value="option8">Opção 8</option>
          </div>
    <option value="option9">Opção 9</option>
 
    <option value="option10">Opção 10</option>
          <div class="option">
  </select>
            <input type="radio" class="radio" id="film" name="category" />
</div>
            <label for="film">Film & Animation</label>
          </div>
 
          <div class="option">
            <input type="radio" class="radio" id="science" name="category" />
            <label for="science">Science & Technology</label>
          </div>
 
          <div class="option">
            <input type="radio" class="radio" id="art" name="category" />
            <label for="art">Art</label>
          </div>
 
          <div class="option">
            <input type="radio" class="radio" id="music" name="category" />
            <label for="music">Music</label>
          </div>
 
          <div class="option">
            <input type="radio" class="radio" id="travel" name="category" />
            <label for="travel">Travel & Events</label>
          </div>
 
          <div class="option">
            <input type="radio" class="radio" id="sports" name="category" />
            <label for="sports">Sports</label>
          </div>
 
          <div class="option">
            <input type="radio" class="radio" id="news" name="category" />
            <label for="news">News & Politics</label>
          </div>
 
          <div class="option">
            <input type="radio" class="radio" id="tutorials" name="category" />
            <label for="tutorials">Tutorials</label>
          </div>
        </div>
 
        <div class="selected">
          Select Video Category
        </div>
 
        <div class="search-box">
          <input type="text" placeholder="Start Typing..." />
        </div>
      </div>


<script>
<script>
const searchBox = document.querySelector('.search-box');
const selected = document.querySelector(".selected");
const optionsList = document.querySelector('.options-list');
const optionsContainer = document.querySelector(".options-container");
const searchBox = document.querySelector(".search-box input");


// Mostra as opções que correspondem à pesquisa
const optionsList = document.querySelectorAll(".option");
searchBox.addEventListener('input', () => {
 
  const searchValue = searchBox.value.toLowerCase();
selected.addEventListener("click", () => {
  const options = optionsList.options;
  optionsContainer.classList.toggle("active");
 
 
  for (let i = 0; i < options.length; i++) {
  searchBox.value = "";
    const optionValue = options[i].text.toLowerCase();
   filterList("");
   
 
    if (optionValue.indexOf(searchValue) !== -1) {
   if (optionsContainer.classList.contains("active")) {
      options[i].classList.remove('hide');
     searchBox.focus();
    } 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
optionsList.forEach(o => {
document.addEventListener('click', event => {
  o.addEventListener("click", () => {
  const target = event.target;
    selected.innerHTML = o.querySelector("label").innerHTML;
 
     optionsContainer.classList.remove("active");
  if (!target.closest('.select-box')) {
   });
     optionsList.classList.remove('show');
   }
});
});


// Seleciona a opção quando o usuário clica nela
searchBox.addEventListener("keyup", function(e) {
optionsList.addEventListener('change', () => {
   filterList(e.target.value);
   const selectedOption = optionsList.options[optionsList.selectedIndex];
  searchBox.value = selectedOption.text;
  optionsList.classList.remove('show');
});
});


const filterList = searchTerm => {
  searchTerm = searchTerm.toLowerCase();
  optionsList.forEach(option => {
    let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
    if (label.indexOf(searchTerm) != -1) {
      option.style.display = "block";
    } else {
      option.style.display = "none";
    }
  });
};
</script>
</script>

Edição das 23h29min de 1 de maio de 2023

           <input
             type="radio"
             class="radio"
             id="automobiles"
             name="category"
           />
           <label for="automobiles">Automobiles</label>

           <input type="radio" class="radio" id="film" name="category" />
           <label for="film">Film & Animation</label>

           <input type="radio" class="radio" id="science" name="category" />
           <label for="science">Science & Technology</label>

           <input type="radio" class="radio" id="art" name="category" />
           <label for="art">Art</label>

           <input type="radio" class="radio" id="music" name="category" />
           <label for="music">Music</label>

           <input type="radio" class="radio" id="travel" name="category" />
           <label for="travel">Travel & Events</label>

           <input type="radio" class="radio" id="sports" name="category" />
           <label for="sports">Sports</label>

           <input type="radio" class="radio" id="news" name="category" />
           <label for="news">News & Politics</label>

           <input type="radio" class="radio" id="tutorials" name="category" />
           <label for="tutorials">Tutorials</label>

         Select Video Category

         <input type="text" placeholder="Start Typing..." />

<script> const selected = document.querySelector(".selected"); const optionsContainer = document.querySelector(".options-container"); const searchBox = document.querySelector(".search-box input");

const optionsList = document.querySelectorAll(".option");

selected.addEventListener("click", () => { 

 optionsContainer.classList.toggle("active");

 searchBox.value = "";
 filterList("");

 if (optionsContainer.classList.contains("active")) {
   searchBox.focus();
 }

});

optionsList.forEach(o => { 

 o.addEventListener("click", () => {
   selected.innerHTML = o.querySelector("label").innerHTML;
   optionsContainer.classList.remove("active");
 });

});

searchBox.addEventListener("keyup", function(e) { 

 filterList(e.target.value);

});

const filterList = searchTerm => { 

 searchTerm = searchTerm.toLowerCase();
 optionsList.forEach(option => {
   let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
   if (label.indexOf(searchTerm) != -1) {
     option.style.display = "block";
   } else {
     option.style.display = "none";
   }
 });

}; </script>

Disponível em “https://wiki.pokexgames.com/index.php?title=Widget:Agatha-test&oldid=63178”