Image Search Google

by aybalasubramanian

HTML

<div id="search">
  <form id="search_form">
    <input type="text" id="search_txt" placeholder="Keyword" />
    <input type="submit" value="Search">
  </form>
</div>
<div id="result"></div>

JavaScript

$("#search_form").submit(function(e) {
  $("#result").html("");
  e.preventDefault();
  var searchQuery = $("#search_txt").val();
  if (!searchQuery) {
    searchQuery = "dog";
  }
  $.ajax({
    type: "GET",
    dataType: "jsonp",
    url: "https://www.googleapis.com/customsearch/v1",
    data: {
      key: "AIzaSyCzb6SI_JRrp6xLLYV617Ary6n59h36ros",
      cx: "004286675445984025592:ypgpkv9fjd4",
      filter: "1",
      searchType: "image",
      //imgSize: "small",
      q: searchQuery
    }
  }).done(function(data) {
    var googleResults = data.items;
    $(".result li").remove();
    $.each(googleResults, function(i, o) {
      var imageURL = o.image.thumbnailLink;
      if (i == 0) {
        $("#result").append("<div class='result_item'><img src='" + imageURL + "' /></div>");
      } 
    })
  });
})