Widget:SelectSearch

       Selecione a frase desejada
       <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>

   const optionsImage = [
       {
           label: "Texto a ser exibido",
           image: "/images/3/33/Beholder_Eye.png",
           obs: "Texto a ser exibido como descrição da imagem a cima"
       },
       {
           label: "Outro texto",
           image: "/images/d/de/Big_Cask.png",
           obs: ""
       },
   ]

   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 = "";

       optionsValues.forEach(option => {
           let isSelected = option.image === selectedOpt ? "selected" : "";

let liItem = `

${option.label}

`; options.insertAdjacentHTML("beforeend", liItem); }); } addOptions(); function updateName(selectedValue, img, obs) { searchInp.value = ""; addOptions(selectedValue); wrapper.classList.remove("active"); document.querySelector('#img-select-search').src = window.location.origin + 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 = optionsValues.filter(data => { return data.phrases.filter(curr => curr.toLowerCase().startsWith(searchWord)).length > 0; }).map(option => { let isSelected = option.group === selectBtn.firstElementChild.innerText ? "selected" : ""; let html = ""; html += `

${option.group}

`; return html; }).join(""); options.innerHTML = arr ? arr : `

Nenhuma frase foi encontrada!

`;

   });

   selectBtn.addEventListener("click", () => wrapper.classList.toggle("active"));

</script>