Как вернуть изображения на основе поиска?

Я использую API Getty Image Search API, и я хотел бы, чтобы изображения возвращались для представления фразового поиска. Вот мой код ниже. Когда я говорю, что «НАСА» является конечной точкой, он работает, но я хотел бы, чтобы это было тем, что вводит пользователь.Как вернуть изображения на основе поиска?

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>

источник

2016-02-27 kylel95

я написал код, используя Python для загрузки изображений с полным разрешением от Google следовать этому http://stackoverflow.com/a/28487500/2875380 – rishabhr0y

Это должно работать:

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

источник

2016-02-27 17:13:40 Kordi

Это сработало @ Kordi Спасибо – kylel95

Оберните AJAX с функцией.

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

Удалить form;
Используйте кнопку прослушивания кликов на кнопке «Отправить», чтобы получить текущее значение поля ввода и вызвать функцию getImage;

источник

2016-02-27 17:16:23

Непонятно, что вы ищете, похоже, вы пытаетесь использовать 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>

источник

2016-02-27 17:20:06 Hitmands

Как вернуть изображения на основе поиска?

ответ

Смежные вопросы