<div>
        <input id="searchbar" type="text" placeholder="Tìm kiếm gì đó">
        <ul id="results"></ul>
    </div>

// ! Backend Fake API

let backendAPI = [
  { id: 1, name: "google.com" },
  { id: 2, name: "facebook.com" },
  { id: 3, name: "messenger.com" },
  { id: 4, name: "font.google.com" },
  { id: 5, name: "youtube.com" },
];

// ! Frontend Handler

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

// Debounce function
function debounce(fn, ms, event = null) {
  let timer;

  return (...arguments) => {
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, arguments);

      console.log(
        "Call debounce after " + ms + "ms",
        ",typing total " + timer + "ms"
      );
    }, ms);
  };
}

// render UI
function render(content = []) {
  if (content.length === 0) {
    $("#results").innerHTML = "Không có dữ liệu khớp";
    return;
  }

  $("#results").innerHTML = content
    // content innerHtml
    .map(
      (v) => `
        <li>${v.name}</li>
    `
    )
    // remove ,
    .join("");
}

// Building
const builder = (() => {
  return {
    init: () => render(backendAPI),
    install: () => {
      // handler searching
      $("#searchbar").addEventListener(
        "keyup", // listener event keyup
        debounce(function (e) { // call debounce to handle
          let value = e.target.value; // get value

          // filter with name from api
          let results = backendAPI.filter((v) => {
            if (v.name.indexOf(value) !== -1) {
              return v;
            }
          });

          // render UI
          render(results);
        }, 500)
      );
    },
  };
})();

builder.init();
builder.install();