988
edições
Widget:SelectSearch (ver código-fonte)
Edição das 19h07min de 20 de fevereiro de 2024
, 20 fevereirosem sumário de edição
Sem resumo de edição |
Sem resumo de edição |
||
| (8 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.querySelector(".selectwithSearch__selectBtn"), | selectBtn<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__selectBtn"), | ||
searchInp<!--{$id|default:''|escape:'html'}--> = wrapper.querySelector("input"), | searchInp<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector("input"), | ||
options<!--{$id|default:''|escape:'html'}--> = wrapper.querySelector(".selectwithSearch__options"); | options<!--{$id|default:''|escape:'html'}--> = wrapper<!--{$id|default:''|escape:'html'}-->.querySelector(".selectwithSearch__options"); | ||
function addOptions<!--{$id|default:''|escape:'html'}-->(selectedOpt) { | function addOptions<!--{$id|default:''|escape:'html'}-->(selectedOpt) { | ||
| Linha 40: | Linha 49: | ||
let isSelected = option.label === selectedOpt ? "selected" : ""; | let isSelected = option.label === selectedOpt ? "selected" : ""; | ||
let liItem = `<li onclick="updateName('${option.label}', '${option.image}', '${option.obs}')" class="${isSelected}"> ${option.label} </li>`; | let liItem = `<li onclick="updateName<!--{$id|default:''|escape:'html'}--> | ||
('${option.label}', '${option.image}', '${option.obs}')" class="${isSelected}"> ${option.label} </li>`; | |||
options<!--{$id|default:''|escape:'html'}-->.insertAdjacentHTML("beforeend", liItem); | options<!--{$id|default:''|escape:'html'}-->.insertAdjacentHTML("beforeend", liItem); | ||
}); | }); | ||
| Linha 62: | 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 = ""; | ||