JSFiddle - React, Tailwind, and code Playground

by karthick Chandran

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="container" style="padding-top:10px">
  <input type="text" id="searchInput" value="" style="width:300px" />
  <input type="button" value="Search" onclick="Load();" />
  <span  id="exTime">
  
  </span>
  <div id="list">

  </div>
</div>
<script>
  $("#searchInput").keyup(function(event) {
    if (event.keyCode === 13) {
      Load();
    }
  });

  function Load() {
  $("#exTime").val();
var start_time = new Date().getTime();

    var input = $("#searchInput").val();
    $.getJSON('https://www.googleapis.com/customsearch/v1?key=AIzaSyAsJAKLPLvq9t83GkX9FnFncVbjMxntYjg&cx=015837469978072049255:6ofvfi5hsk4&q=' + encodeURIComponent(input) + '&callback=?', function(response) {
 var request_time = new Date().getTime() - start_time;
 $("#exTime").val(request_time.toString() + 'ms);
      var pages = response.items;
      console.log(pages);
      $("#list").empty();
      $("#searchInput").val("");
      for (var i = 0; i < pages.length; i++) {
        $("#list").append('<h2>' + pages[i].title + '</h2>' + '<div>' + pages[i].snippet + '</div>' + '<div>' + '<a target="_blank" 						href="'+pages[i].link + '">' + pages[i].title + '</a></div>');
      }

    });


  }

</script>