<div id="blog-geolytix-search" class="input-drop">
  <input type="text" placeholder="Search places"></input>
  <ul></ul>
</div>

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  border: 1px solid red;
  padding: 10px;
}

:focus {
  outline: none;
}

input {
  width: 100%;
}

input[type="text"] {
  border: 1px solid #ccc;
  padding: 3px;
}

.input-drop {
  width: 100%;
  overflow: visible;
  position: relative;
  box-shadow: 1px 1px 3px 0 #ddd;
  margin: 5px 0;

  &:disabled {
    pointer-events: none;
    opacity: 0.4;
  }

  input[type="text"] {
    width: 100%;
    text-overflow: ellipsis;
    padding: 5px;
    border: 1px solid #ccc;
  }

  ul {
    width: 100%;
    margin-top: -2px;
    max-height: 0;
    transition: max-height 0.3s ease-out;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
    z-index: 999;
    padding-inline-start: 0;
    
    li:hover {
      background-color: ghostwhite;
      cursor: pointer;
    }

    li {
      padding: 5px;
      white-space: nowrap;
      list-style-type: none;
      text-overflow: ellipsis;
      overflow: hidden;

      a {
        text-decoration: none;
        background-color: transparent;
        color: black;
      }
    }
  }

  &.active > ul {
    max-height: 600px;
    box-shadow: 1px 1px 3px 0 #ddd;
    border: 1px solid#ccc;
  }
}

const input_drop = document.getElementById("blog-geolytix-search");
input_drop.querySelector("input").addEventListener("keyup", async e => {
  input_drop.classList.remove("active");

  input_drop.querySelector("ul").innerHTML = "";

  const response = await fetch(
    `https://www.googleapis.com/customsearch/v1?key=AIzaSyCeO3Gz5cibyjahrvQ2DrFz9g-JSBdOVHI&cx=017546528120607724104:meu8ocxaluu&sort=date&q=${
      e.target.value
    }`
  );
  const list = await response.json();

  if (!list.items || !list.items.length) return;

  const items = list.items.slice(0, 5);

  items.forEach(async item => {
    const li = document.createElement("li");

    li.innerHTML = `<a href="${item.link}" target="_blank">${item.title}</a>`;

    input_drop.querySelector("ul").appendChild(li);
  });

  input_drop.classList.add("active");
});