PokeXGames

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

Widget Discussão

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

Edição das 12h49min de 8 de junho de 2023

1 431 bytes adicionados ,  8 de junho de 2023
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
 
(14 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<div class="select-box">
<div class="selectwithSearch__container">
  <input type="text" placeholder="Buscar opção" class="search-box">
    <div class="selectwithSearch__selectBtn">
  <select name="options" class="options-list">
      <span>Selecione a frase desejada</span>
    <option value="option1">Opção 1</option>
      <svg width="24" height="24" fill="#000" viewBox="0 0 16 16">
     <option value="option2">Opção 2</option>
        <path fill-rule="evenodd"
    <option value="option3">Opção 3</option>
          d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
    <option value="option4">Opção 4</option>
      </svg>
    <option value="option5">Opção 5</option>
    </div>
    <option value="option6">Opção 6</option>
 
     <option value="option7">Opção 7</option>
     <div class="selectwithSearch__content">
    <option value="option8">Opção 8</option>
      <div class="selectwithSearch__search">
    <option value="option9">Opção 9</option>
        <svg width="18" height="18" viewBox="0 0 16 16">
    <option value="option10">Opção 10</option>
          <path
  </select>
            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
 
        <input spellcheck="false" type="text" placeholder="Pesquisa">
      </div>
 
      <ul class="selectwithSearch__options"></ul>
     </div>
</div>
 
<div class="mt-2">
<img src="" class="margin-center d-none" style="border-radius: 6px" alt="Imagem do resultado da pesquisa" id="img-select" />
<p class="text-center" id="obs-select"></p>
</div>
</div>


<script>
<script>
const searchBox = document.querySelector('.search-box');
const wrapper = document.querySelector(".selectwithSearch__container"),
const optionsList = document.querySelector('.options-list');
    selectBtn = wrapper.querySelector(".selectwithSearch__selectBtn"),
    searchInp = wrapper.querySelector("input"),
    options = wrapper.querySelector(".selectwithSearch__options");
 
function addOptions(selectedOpt) {
    options.innerHTML = "";
 
    optionsValues.forEach(option => {
        let isSelected = option.group === selectedOpt ? "selected" : "";


// Mostra as opções que correspondem à pesquisa
        let liGroup = `<li class="groupTitle ${isSelected}"> ${option.group} </li>`;
searchBox.addEventListener('input', () => {
        options.insertAdjacentHTML("beforeend", liGroup);
  const searchValue = searchBox.value.toLowerCase();
 
  const options = optionsList.options;
        option.phrases.map(phrase => {
 
            let li = `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`;
  for (let i = 0; i < options.length; i++) {
            options.insertAdjacentHTML("beforeend", li);
     const optionValue = options[i].text.toLowerCase();
        });
      
    });
     if (optionValue.indexOf(searchValue) !== -1) {
}
      options[i].classList.remove('hide');
 
     } else {
addOptions();
      options[i].classList.add('hide');
 
     }
function updateName(selectedValue, img, obs) {
  }
    searchInp.value = "";
 
    addOptions(selectedValue);
  const visibleOptions = [...options].filter(option => !option.classList.contains('hide'));
     wrapper.classList.remove("active");
 
     document.querySelector('#img-select').src = window.location.origin + img;
  if (visibleOptions.length > 0) {
     document.querySelector('#img-select').classList.remove('d-none');
    optionsList.classList.add('show');
     document.querySelector('#img-select').classList.add('d-block');
  } else {
    document.querySelector('#obs-select').innerHTML = obs;
    optionsList.classList.remove('show');
     selectBtn.firstElementChild.innerText = selectedValue;
  }
}
});
 
searchInp.addEventListener("keyup", () => {
    let arr = [];
    let searchWord = searchInp.value.toLowerCase();
 
    arr = optionsValues.filter(data => {
        return data.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).length > 0;
    }).map(option => {
        let isSelected = option.group === selectBtn.firstElementChild.innerText ? "selected" : "";
        let html = "";
 
        html += `<li class="groupTitle ${isSelected}"> ${option.group} </li>`;
        option.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).map(phrase => {
            html += `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`;
        });


// Esconde as opções quando o usuário clica fora da caixa de seleção
        return html;
document.addEventListener('click', event => {
    }).join("");
  const target = event.target;
 
  if (!target.closest('.select-box')) {
    optionsList.classList.remove('show');
  }
});


// Seleciona a opção quando o usuário clica nela
    options.innerHTML = arr ? arr : `<p style="margin-top: 10px;">Nenhuma frase foi encontrada!</p>`;
optionsList.addEventListener('change', () => {
  const selectedOption = optionsList.options[optionsList.selectedIndex];
  searchBox.value = selectedOption.text;
  optionsList.classList.remove('show');
});
});


selectBtn.addEventListener("click", () => wrapper.classList.toggle("active"));
</script>
</script>
Disponível em “https://wiki.pokexgames.com/index.php/Especial:MobileDiff/63177...65278”