992
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 |
||
| (3 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 30: | Linha 30: | ||
<script defer> | <script defer> | ||
document.addEventListener("click", function() { | 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'); | 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'}-->"), | ||
| Linha 68: | 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 = ""; | ||