993
edições
sem sumário de edição
(Criou página com '<div class="selectwithSearch__container"> <div class="selectwithSearch__selectBtn"> <span>Selecione a frase desejada</span> <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> </div> <div class="selectwithSearch__content"> <div class="selectwithSearch_...') |
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>Selecione a frase desejada</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"> | ||
| Linha 15: | Linha 15: | ||
</svg> | </svg> | ||
<input spellcheck="false" type="text" placeholder="Pesquisa"> | <input id="input-<!--{$id|default:''|escape:'html'}-->" spellcheck="false" type="text" placeholder="Pesquisa"> | ||
</div> | </div> | ||
<ul class="selectwithSearch__options"></ul> | <ul class="selectwithSearch__options<!--{$id|default:''|escape:'html'}-->"></ul> | ||
</div> | </div> | ||
</div> | </div> | ||
<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" id="img-select" /> | <img src="" class="margin-center d-none" style="border-radius: 6px" alt="Imagem do resultado da pesquisa" id="img-select<!--{$id|default:''|escape:'html'}-->" /> | ||
<p class="text-center" id="obs-select"></p> | <p class="text-center" id="obs-select"></p> | ||
</div> | </div> | ||
<script> | <script> | ||
const wrapper = document.querySelector(".selectwithSearch__container"), | const wrapper = document.querySelector(".selectwithSearch__container<!--{$id|default:''|escape:'html'}-->"), | ||
selectBtn = wrapper.querySelector(".selectwithSearch__selectBtn"), | selectBtn = wrapper.querySelector(".selectwithSearch__selectBtn<!--{$id|default:''|escape:'html'}-->"), | ||
searchInp = wrapper.querySelector("input"), | searchInp = wrapper.querySelector("#input-<!--{$id|default:''|escape:'html'}-->"), | ||
options = wrapper.querySelector(".selectwithSearch__options"); | options = wrapper.querySelector(".selectwithSearch__options<!--{$id|default:''|escape:'html'}-->"); | ||
function addOptions(selectedOpt) { | function addOptions(selectedOpt) { | ||
options.innerHTML = ""; | options.innerHTML = ""; | ||
optionsValues.forEach(option => { | optionsValues<!--{$id|default:''|escape:'html'}-->.forEach(option => { | ||
let isSelected = option.group === selectedOpt ? "selected" : ""; | let isSelected = option.group === selectedOpt ? "selected" : ""; | ||
| Linha 55: | Linha 55: | ||
addOptions(selectedValue); | addOptions(selectedValue); | ||
wrapper.classList.remove("active"); | wrapper.classList.remove("active"); | ||
document.querySelector('#img-select').src = window.location.origin + img; | document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').src = window.location.origin + img; | ||
document.querySelector('#img-select').classList.remove('d-none'); | document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').classList.remove('d-none'); | ||
document.querySelector('#img-select').classList.add('d-block'); | document.querySelector('#img-select<!--{$id|default:''|escape:'html'}-->').classList.add('d-block'); | ||
document.querySelector('#obs-select').innerHTML = obs; | document.querySelector('#obs-select').innerHTML = obs; | ||
selectBtn.firstElementChild.innerText = selectedValue; | selectBtn.firstElementChild.innerText = selectedValue; | ||