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
 
(6 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 8: Linha 8:
     </div>
     </div>


     <div class="selectwithSearch__content <!--{$id|default:''|escape:'html'}-->">
     <div class="selectwithSearch__content <!--{$classes|default:''|escape:'html'}--> <!--{$id|default:''|escape:'html'}-->">
         <div class="selectwithSearch__search <!--{$id|default:''|escape:'html'}-->">
         <div class="selectwithSearch__search <!--{$id|default:''|escape:'html'}-->">
             <svg width="18" height="18" viewBox="0 0 16 16">
             <svg width="18" height="18" viewBox="0 0 16 16">
Linha 29: Linha 29:


<script defer>
<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<!--{$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"),
Linha 63: Linha 72:
         let searchWord = searchInp<!--{$id|default:''|escape:'html'}-->.value.toLowerCase();
         let searchWord = searchInp<!--{$id|default:''|escape:'html'}-->.value.toLowerCase();


         arr = optionsImage.filter(data => {
         arr = optionsImage<!--{$id|default:''|escape:'html'}-->.filter(data => {
             return data.label.toLowerCase().indexOf(searchWord) > -1;
             return data.label.toLowerCase().indexOf(searchWord) > -1;
         }).map(option => {
         }).map(option => {
             let isSelected = option.label === selectBtn.firstElementChild.innerText ? "selected" : "";
             let isSelected = option.label === selectBtn<!--{$id|default:''|escape:'html'}-->.firstElementChild.innerText ? "selected" : "";
             let html = "";
             let html = "";



Edição atual tal como às 19h07min de 20 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.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>