993
edições
Widget:SelectSearch (ver código-fonte)
Edição das 20h22min de 16 de fevereiro de 2024
, 16 fevereirosem sumário de edição
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 1: | Linha 1: | ||
<div class="selectwithSearch__container"> | <div class="selectwithSearch__container <!--{$id|default:''|escape:'html'}-->"> | ||
<div class="selectwithSearch__selectBtn"> | <div class="selectwithSearch__selectBtn <!--{$id|default:''|escape:'html'}-->"> | ||
<span>Selecione a frase desejada</span> | <span> <!--{$title|default:'Selecione a frase desejada'|escape:'html'}--> </span> | ||
<svg width="24" height="24" fill="#000" viewBox="0 0 16 16"> | <svg width="24" height="24" fill="#000" viewBox="0 0 16 16"> | ||
<path fill-rule="evenodd" | <path fill-rule="evenodd" | ||
| Linha 8: | Linha 8: | ||
</div> | </div> | ||
<div class="selectwithSearch__content"> | <div class="selectwithSearch__content <!--{$id|default:''|escape:'html'}-->"> | ||
<div class="selectwithSearch__search"> | <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"> | ||
<path | <path | ||
| Linha 18: | Linha 18: | ||
</div> | </div> | ||
<ul class="selectwithSearch__options"></ul> | <ul class="selectwithSearch__options <!--{$id|default:''|escape:'html'}-->"></ul> | ||
</div> | </div> | ||
</div> | </div> | ||
| Linha 24: | Linha 24: | ||
<div class="mt-2"> | <div class="mt-2"> | ||
<img src="" class="margin-center d-none" style="border-radius: 6px" alt="Imagem do resultado da pesquisa" | <img src="" class="margin-center d-none" style="border-radius: 6px" alt="Imagem do resultado da pesquisa" | ||
id="img-select-search" /> | id="img-select-search-<!--{$id|default:''|escape:'html'}-->" /> | ||
<p class="text-center" id="obs-select-search"></p> | <p class="text-center" id="obs-select-search-<!--{$id|default:''|escape:'html'}-->"></p> | ||
</div> | </div> | ||
<script defer> | <script defer> | ||
const wrapper = document.querySelector(".selectwithSearch__container"), | const wrapper<!--{$id|default:''|escape:'html'}--> = document.querySelector(".selectwithSearch__container.<!--{$id|default:''|escape:'html'}-->"), | ||
selectBtn = wrapper.querySelector(".selectwithSearch__selectBtn"), | selectBtn<!--{$id|default:''|escape:'html'}--> = wrapper.querySelector(".selectwithSearch__selectBtn"), | ||
searchInp = wrapper.querySelector("input"), | searchInp<!--{$id|default:''|escape:'html'}--> = wrapper.querySelector("input"), | ||
options = wrapper.querySelector(".selectwithSearch__options"); | options<!--{$id|default:''|escape:'html'}--> = wrapper.querySelector(".selectwithSearch__options"); | ||
function addOptions(selectedOpt) { | function addOptions<!--{$id|default:''|escape:'html'}-->(selectedOpt) { | ||
options.innerHTML = ""; | options<!--{$id|default:''|escape:'html'}-->.innerHTML = ""; | ||
optionsImage.forEach(option => { | optionsImage<!--{$id|default:''|escape:'html'}-->.forEach(option => { | ||
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('${option.label}', '${option.image}', '${option.obs}')" class="${isSelected}"> ${option.label} </li>`; | ||
options.insertAdjacentHTML("beforeend", liItem); | options<!--{$id|default:''|escape:'html'}-->.insertAdjacentHTML("beforeend", liItem); | ||
}); | }); | ||
} | } | ||
addOptions(); | addOptions<!--{$id|default:''|escape:'html'}-->(); | ||
function updateName(selectedValue, img, obs) { | function updateName<!--{$id|default:''|escape:'html'}-->(selectedValue, img, obs) { | ||
searchInp.value = ""; | searchInp<!--{$id|default:''|escape:'html'}-->.value = ""; | ||
addOptions(selectedValue); | addOptions<!--{$id|default:''|escape:'html'}-->(selectedValue); | ||
wrapper.classList.remove("active"); | wrapper<!--{$id|default:''|escape:'html'}-->.classList.remove("active"); | ||
document.querySelector('#img-select-search').src = img; | document.querySelector('#img-select-search-<!--{$id|default:''|escape:'html'}-->').src = img; | ||
document.querySelector('#img-select-search').classList.remove('d-none'); | document.querySelector('#img-select-search-<!--{$id|default:''|escape:'html'}-->').classList.remove('d-none'); | ||
document.querySelector('#img-select-search').classList.add('d-block'); | document.querySelector('#img-select-search-<!--{$id|default:''|escape:'html'}-->').classList.add('d-block'); | ||
document.querySelector('#obs-select-search').innerHTML = obs; | document.querySelector('#obs-select-search-<!--{$id|default:''|escape:'html'}-->').innerHTML = obs; | ||
selectBtn.firstElementChild.innerText = selectedValue; | selectBtn<!--{$id|default:''|escape:'html'}-->.firstElementChild.innerText = selectedValue; | ||
} | } | ||
searchInp.addEventListener("keyup", () => { | searchInp<!--{$id|default:''|escape:'html'}-->.addEventListener("keyup", () => { | ||
let arr = []; | let arr = []; | ||
let searchWord = searchInp.value.toLowerCase(); | let searchWord = searchInp<!--{$id|default:''|escape:'html'}-->.value.toLowerCase(); | ||
arr = optionsImage.filter(data => { | arr = optionsImage.filter(data => { | ||
| Linha 68: | Linha 68: | ||
let html = ""; | let html = ""; | ||
html += `<li onclick="updateName('${option.label}', '${option.image}', '${option.obs}')" class="${isSelected}"> ${option.label} </li>`; | html += `<li onclick="updateName<!--{$id|default:''|escape:'html'}-->('${option.label}', '${option.image}', '${option.obs}')" class="${isSelected}"> ${option.label} </li>`; | ||
return html; | return html; | ||
}).join(""); | }).join(""); | ||
options.innerHTML = arr ? arr : `<p style="margin-top: 10px;">Nenhuma frase foi encontrada!</p>`; | options<!--{$id|default:''|escape:'html'}-->.innerHTML = arr ? arr : `<p style="margin-top: 10px;">Nenhuma frase foi encontrada!</p>`; | ||
}); | }); | ||
selectBtn.addEventListener("click", () => wrapper.classList.toggle("active")); | selectBtn<!--{$id|default:''|escape:'html'}-->.addEventListener("click", () => wrapper<!--{$id|default:''|escape:'html'}-->.classList.toggle("active")); | ||
</script> | </script> | ||