Widget:SelectSearch

De PokeXGames
Ir para navegação Ir para pesquisar
         
       <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>

       document.addEventListener("click", function() {
    if (
         !event.target.closest(".selectwithSearch__container")
       ) {
         const element = document.querySelector(".selectwithSearch__container.active");
          if(element)  document.querySelector(".selectwithSearch__container.active").classList.remove('active');
       }
       }, false);
    
       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.label === 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.label === 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>