How to return images based on what is searched?

Question

I am using Getty Image Photo Search API and I would like the images returned to represent the phrased search. Here is all of my code below. When I put say "NASA" as the endpoint it works, but I would like for it to be what the user inputs.

var apiKey = 'apiKey';
var item = document.getElementById("item");
$.ajax({
    type: 'GET',
    url: "https://api.gettyimages.com/v3/search/images/creative?phrase=+item",
    beforeSend: function(request) {
      request.setRequestHeader("Api-Key", apiKey);
    }
  })
  .done(function(data) {
    console.log("Success with data")
    for (var i = 0; i < data.images.length; i++) {
      $("#output").append("<img src='" + data.images[i].display_sizes[0].uri + "'/>");
    }
  })
  .fail(function(data) {
    alert(JSON.stringify(data, 2))
  });

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" src="places.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>

<body>
  <form class="form-inline" action="" method="post">
    <div class="form-group">
      <input type="text" class="form-control " id="item" name="imageSearch" placeholder="Search for an Image">
    </div>
    <input class="btn btn-default" type="submit" value="Submit">
    <br>
    <br>
  </form>
  <div id="output"></div>
</body>

</html>

i wrote code using python to download full resolution images from google follow this http://stackoverflow.com/a/28487500/2875380 — rishabhr0y, Aug 02 '16 at 10:21

score 0 · Answer 1 · answered Feb 27 '16 at 17:13

This should work:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<form class="form-inline"  id="myForm" action="" method="post">

    <div class="form-group">

        <input type="text" class="form-control " id="item" name="imageSearch" placeholder="Search for an Image">
    </div>
    <input class="btn btn-default" type="submit" value="Submit"> <br> <br>
</form>
<div id="output"></div>

<script>
    $('#myForm').on('submit', function(e){
        e.preventDefault();
        search();
        return false;
    });
    function search() {
        var apiKey = 'apiKey';
        $.ajax(
                {
                    type:'GET',
                    url:"https://api.gettyimages.com/v3/search/images/creative?phrase=" + $('#item').val(),
                    beforeSend: function (request)
                    {
                        request.setRequestHeader("Api-Key", apiKey);
                    }})
                .done(function(data){
                    console.log("Success with data")
                    for(var i = 0;i<data.images.length;i++)
                    {
                        $("#output").append("<img src='" + data.images[i].display_sizes[0].uri + "'/>");
                    }
                })
                .fail(function(data){
                    alert(JSON.stringify(data,2))
                });
        return false;
    }
</script>
</body>
</html>

can we access specific images of a user if we have credentials? — Sarabjit Singh, Mar 24 '20 at 08:51

score 0 · Answer 2 · answered Feb 27 '16 at 17:16

0

Wrap the AJAX with a function.

function getImage(imageKey){
   $.ajax(...);
}

Remove the form;
Use an click event listener on the "Submit" button to fetch the current Value of input box, and invoke the getImage function;

answered Feb 27 '16 at 17:16

Karthik VU

561
5
17

score 0 · Answer 3 · answered Feb 27 '16 at 17:20

Isn't clear what you are looking for, it seems that you are trying to consume an api based on text field?

Here is an example using jQuery:

function SearchCtrl($) {
  var result = $('#result');
  var field = $('#search');
  var api = 'https://api.gettyimages.com/v3/search/images/creative';
  
  var isLoading = false;
  
  function applyTemplate(model) {
    var tpl = 'Build Your View HERE';
    
    return $.when(tpl);
  }
  function onSearchFieldChange(event) {
    var value = field.val() || '';
    
    if(isLoading || value.length < 3) {
      return;
    }
    
    isLoading = true;
    
    $
    .getJSON(api, {phrase: value})
    .then(function(result) {
      return applyTemplate(result)
    })
    .then(function(view) {
      result.html(view);
    })
    .fail(function() {
      result.html('<h1 class="text-center text-danger">ERROR</h1>');
    })
    .always(function() {
      isLoading = false;
    });
    
  }
  
  field.change(onSearchFieldChange);
}

jQuery(document).ready(SearchCtrl);

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="container">
  <div class="row">
    <div class="col-sm-10 col-sm-offset-1">
      <label for="search">Put Your Text Here</label>
      <input id="search" type="text" class="form-control"/>
    </div>
  </div>
</form>
<hr />

<div id="result"></div>

How to return images based on what is searched?

3 Answers3