Widget:SelectSearch: 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 40: Linha 40:
             let isSelected = option.image === selectedOpt ? "selected" : "";
             let isSelected = option.image === selectedOpt ? "selected" : "";


             let liItem = `<li onclick="updateName('${option.label}', '${option.img}', '${option.obs}')" class="${isSelected}"> ${option.label} </li>`;
             let liItem = `<li onclick="updateName('${option.label}', '${option.image}', '${option.obs}')" class="${isSelected}"> ${option.label} </li>`;
             options.insertAdjacentHTML("beforeend", liItem);
             options.insertAdjacentHTML("beforeend", liItem);
         });
         });
Linha 68: Linha 68:
             let html = "";
             let html = "";


             html += `<li onclick="updateName('${option.label}', '${option.img}', '${option.obs}')" class="${isSelected}"> ${option.label} </li>`;
             html += `<li onclick="updateName('${option.label}', '${option.image}', '${option.obs}')" class="${isSelected}"> ${option.label} </li>`;


             return html;
             return html;

Edição das 10h54min de 20 de dezembro 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>
       <img src="" class="margin-center d-none" style="border-radius: 6px" alt="Imagem do resultado da pesquisa"
           id="img-select-search" />
    

    <script defer>

       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 = "";
    
           optionsImage.forEach(option => {
               let isSelected = option.image === selectedOpt ? "selected" : "";
    

    let liItem = `

  • ${option.label}
  • `; options.insertAdjacentHTML("beforeend", liItem); }); } addOptions(); function updateName(selectedValue, img, obs) { searchInp.value = ""; addOptions(selectedValue); wrapper.classList.remove("active"); document.querySelector('#img-select-search').src = img; document.querySelector('#img-select-search').classList.remove('d-none'); document.querySelector('#img-select-search').classList.add('d-block'); document.querySelector('#obs-select-search').innerHTML = obs; selectBtn.firstElementChild.innerText = selectedValue; } searchInp.addEventListener("keyup", () => { let arr = []; let searchWord = searchInp.value.toLowerCase(); arr = optionsImage.filter(data => { return data.label.toLowerCase().indexOf(searchWord) > -1; }).map(option => { let isSelected = option.group === selectBtn.firstElementChild.innerText ? "selected" : ""; let html = ""; html += `

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

    Nenhuma frase foi encontrada!

    `;

       });
    
       selectBtn.addEventListener("click", () => wrapper.classList.toggle("active"));
    

    </script>