如何根据搜索的内容返回图像？答案

【问题标题】：How to return images based on what is searched?如何根据搜索的内容返回图像？
【发布时间】：2016-02-27 17:01:22
【问题描述】：

我正在使用 Getty Image Photo Search API，我希望返回的图像代表短语搜索。这是我下面的所有代码。当我说“NASA”作为端点时它可以工作，但我希望它成为用户输入的内容。

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>

【问题讨论】：

我使用 python 编写了代码来从谷歌下载全分辨率图像，请关注 stackoverflow.com/a/28487500/2875380

标签： javascript image api search

【解决方案1】：

这应该可行：

<!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>

【讨论】：

如果我们有凭据，我们可以访问用户的特定图像吗？

【解决方案2】：

用函数包装AJAX。

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

删除form；
在“提交”按钮上使用点击事件监听器获取输入框的当前值，并调用getImage函数；

【讨论】：

【解决方案3】：

不清楚您在寻找什么，您似乎正在尝试使用基于文本字段的 api？

这里是一个使用 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>

【讨论】：