Widget:SelectSearch

De PokeXGames
Revisão de 10h38min de 20 de dezembro de 2023 por Rag (discussão | contribs)
Ir para navegação Ir para pesquisar
       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>