{
  const $searchInput = document.querySelector(`[name="q"]`);
  const $activityContainer = document.querySelector(`.activity-container`);

  const init = () => {
    $searchInput.addEventListener(`input`, handleInputSearch);
  };

  const handleInputSearch = () => {
    const q = $searchInput.value.trim();
    if (q.length > 0) {
      fetch(`index.php?q=${q}`, {
        headers: new Headers({
          Accept: `application/json`,
        }),
      })
        .then(r => r.json())
        .then(data => parse(data));
    }
  };

  const parse = results => {
    $activityContainer.innerHTML = results
      .map(event => createEventArticle(event))
      .join(``);
  };

  const createEventArticle = event => {
    return `<li>
      <a href="index.php?page=events&amp;id=${event.id}">
        <h2>${event.title}</h2>
      </a>
    </li>`;
  };

  init();
}