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 29: Linha 29:


<script defer>
<script defer>
    document.addEventListerner("click", function() {
      document.querySelector(".selectwithSearch__container.active").classList.remove('active');
    });
     const wrapper<!--{$id|default:''|escape:'html'}--> = document.querySelector(".selectwithSearch__container.<!--{$id|default:'x'|escape:'html'}-->"),
     const wrapper<!--{$id|default:''|escape:'html'}--> = document.querySelector(".selectwithSearch__container.<!--{$id|default:'x'|escape:'html'}-->"),
         selectBtn<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__selectBtn"),
         selectBtn<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__selectBtn"),

Edição das 21h41min de 18 de fevereiro de 2024

         
       <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.addEventListerner("click", function() {
          document.querySelector(".selectwithSearch__container.active").classList.remove('active');
       });
    
       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>