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
 
(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>

Edição atual tal como às 12h49min de 8 de junho de 2023

     Selecione a frase desejada
     <svg width="24" height="24" fill="#000" viewBox="0 0 16 16">
       <path fill-rule="evenodd"
         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" />
     </svg>

       <svg width="18" height="18" viewBox="0 0 16 16">
         <path
           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">

    <img src="" class="margin-center d-none" style="border-radius: 6px" alt="Imagem do resultado da pesquisa" id="img-select" />

    <script> const wrapper = document.querySelector(".selectwithSearch__container"), 

       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" : "";

    let liGroup = `

  • ${option.group}

    • `; options.insertAdjacentHTML("beforeend", liGroup); option.phrases.map(phrase => { let li = `

  • ${phrase}

    • `; options.insertAdjacentHTML("beforeend", li); }); }); } addOptions(); function updateName(selectedValue, img, obs) { searchInp.value = ""; addOptions(selectedValue); wrapper.classList.remove("active"); document.querySelector('#img-select').src = window.location.origin + img; document.querySelector('#img-select').classList.remove('d-none'); document.querySelector('#img-select').classList.add('d-block'); document.querySelector('#obs-select').innerHTML = obs; 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 += `

  • ${option.group}

    • `; option.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).map(phrase => { html += `

  • ${phrase}

    • `; }); return html; }).join(""); options.innerHTML = arr ? arr : `

    Nenhuma frase foi encontrada!

    `;

    });

    selectBtn.addEventListener("click", () => wrapper.classList.toggle("active")); </script>

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