SelectSearch

Novo componente para uCloud

by Rodrigo Portillo

HTML

<input type="text" id="selSearch" />
<script>

let SelectSearch = {
load: (id, options)=>{

},
};

  function selectSearch(id, options = {}) {
    let searchRef = document.querySelector("#" + id);
    //searchRef.style.display = "none";

    //Create LIs
    let templateList = ``;
    if(options.data != undefined && options.data.length){
      options.data.forEach((li)=>{
        templateList += `<li data-value="${li.value}"><a>${li.label}</a></li>`;
      });
    }

    let template = `
  <div class="select-search" data-id="${id}">
    <div class="select-search-input">
  	<div class="select-search-input-element">
  	  <input type="text"/>
  	</div>
  	<div class="select-search-input-icon">
  	  <a>
  		<svg class="select-search-input-arrow">
  		  <path d="M0 0 L5 6 L10 0"></path>
  		</svg>
  	  </a>
  	</div>
    </div>
    <div class="select-search-list">
  	<ul>
  	  ${templateList}
  	</ul>
    </div>
  </div>`;

    //Create Elements
    let newNode = document.createElement("div");
    newNode.id = "sel_ser_data_" + Math.random().toString(36).substr(2);
    newNode.innerHTML = template;
    let optdata = JSON.stringify(options.data);
    eval(`window.${newNode.id} = ${optdata}`);

    let searchInput = newNode.querySelector(
      ".select-search-input-element input"
    );
    let list = newNode.querySelector(".select-search-list");
    let btn = newNode.querySelector(".select-search-input-icon a");
    btn.addEventListener("click", () => {
      list.classList.toggle("open");
    });

    let items = newNode.querySelectorAll("li a").forEach((el) => {
      el.addEventListener("click", () => {
        searchRef.value = el.parentNode.dataset.value;
        searchInput.value = el.innerHTML.trim();
        list.classList.toggle("open");
      });
    });
    //Generate Component
    searchRef.parentNode.insertBefore(newNode, searchRef.nextSibling);

    //Check for changes
    let interval = setInterval(()=>{

    },500);
    
    //onSearch
   ...