Widget:SelectSearch: mudanças entre as edições
Sem resumo de edição |
Sem resumo de edição |
||
| 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'}-->"), | ||
Edição das 21h45min 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>
<svg width="18" height="18" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
<input spellcheck="false" type="text" placeholder="Pesquisa">
<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 = `
`; 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 += `
`; return html; }).join(""); options.innerHTML = arr ? arr : `
Nenhuma frase foi encontrada!
`;
});
selectBtn.addEventListener("click", () => wrapper.classList.toggle("active"));
</script>