Ajax on JSONP

JSfiddle上でなければ動く

by yshrkn

HTML

<h1>Event Search</h1>
<main>
  <form id="search-form">
    <input id="search-input" type="search" placeholder="ex. JavaScript">
    <button type="submit">Search</button>
  </form>
  <ul id="event-list"></ul>
</main>

JavaScript

var searchForm = document.getElementById("search-form");
  var searchInput = document.getElementById("search-input");
  var eventList = document.getElementById("event-list");

  var searchEvents = function(event) {
    event.preventDefault();
    var keyword = searchInput.value;

    if (!keyword) {
      return;
    }

    eventList.innerHTML = "<li>Searching...</li>";

    var element = document.createElement("script");
    element.src = "http://api.atnd.org/events/" + "?format=jsonp&keyword=" + encodeURI(keyword);
    document.body.appendChild(element);
    document.body.removeChild(element);
  };

  var showEvents = function(data) {
    eventList.innerHTML = "";

    if (data && data.events instanceof Array) {
      data.events.forEach(function(eventData) {
        var eventInfo = eventData.event;
        var time = document.createElement("time");
        time.textContent = formatDate(eventInfo.started_at);

        var a = document.createElement("a");
        a.href = encodeURI(eventInfo.event_url);
        a.target = "_blank";
        a.textContent = eventInfo.title;

        var li = document.createElement("li");
        li.appendChild(time);
        li.appendChild(a);
        eventList.appendChild(li);
      });
    }
  };

  var formatDate = function (dateString) {
    var date = new Date(dateString);
    return (date.getMonth() + 1) + "/" + date.getDate();
  };

  searchForm.addEventListener("submit", searchEvents);

  window.callback = showEvents;