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

De PokeXGames
Ir para navegação Ir para pesquisar
(Criou página com '<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <select class="js-example-basic-single" name="state"> <optgroup label="Item 1"> <option value="01">The most common colors are brown, blue, green and black</option> </optgroup> <optgroup label="Item 2"> <option value="02">158,987295 liters</option> </optgrou...')
 
Sem resumo de edição
 
(18 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<div class="selectwithSearch__container">
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <div class="selectwithSearch__selectBtn">
      <span>Selecione a frase desejada</span>
      <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>
    </div>


<select class="js-example-basic-single" name="state">
    <div class="selectwithSearch__content">
  <optgroup label="Item 1">
      <div class="selectwithSearch__search">
    <option value="01">The most common colors are brown, blue, green and black</option>
        <svg width="18" height="18" viewBox="0 0 16 16">
  </optgroup>
          <path
  <optgroup label="Item 2">
            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" />
    <option value="02">158,987295 liters</option>
        </svg>
  </optgroup>
 
  <optgroup label="Item 3">
        <input spellcheck="false" type="text" placeholder="Pesquisa">
    <option value="03">It has a powerful poison</option>
      </div>
  </optgroup>
 
</select>
      <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>


<script>
<script>
$(document).ready(function() {
const wrapper = document.querySelector(".selectwithSearch__container"),
     $('.js-example-basic-single').select2();
    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 = `<li class="groupTitle ${isSelected}"> ${option.group} </li>`;
        options.insertAdjacentHTML("beforeend", liGroup);
 
        option.phrases.map(phrase => {
            let li = `<li onclick="updateName('${option.group}', '${option.img}', '${option.obs}')"> ${phrase} </li>`;
            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 += `<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>`;
        });
 
        return html;
    }).join("");
 
    options.innerHTML = arr ? arr : `<p style="margin-top: 10px;">Nenhuma frase foi encontrada!</p>`;
});
});
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”