Widget:SelectSearch: mudanças entre as edições

De PokeXGames
Ir para navegação Ir para pesquisar
(Criou página com '<div class="selectwithSearch__container"> <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> <div class="selectwithSearch__content"> <div class=...')
 
Sem resumo de edição
Linha 29: Linha 29:


<script>
<script>
    const optionsImage = [
        {
            label: "Texto a ser exibido",
            image: "/images/3/33/Beholder_Eye.png",
            obs: "Texto a ser exibido como descrição da imagem a cima"
        },
        {
            label: "Outro texto",
            image: "/images/d/de/Big_Cask.png",
            obs: ""
        },
    ]
     const wrapper = document.querySelector(".selectwithSearch__container"),
     const wrapper = document.querySelector(".selectwithSearch__container"),
         selectBtn = wrapper.querySelector(".selectwithSearch__selectBtn"),
         selectBtn = wrapper.querySelector(".selectwithSearch__selectBtn"),

Edição das 10h38min 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>

       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.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 = window.location.origin + 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 = 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}
  • `; return html; }).join(""); options.innerHTML = arr ? arr : `

    Nenhuma frase foi encontrada!

    `;

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

    </script>