JavaScript AJAX Basics (retiring) AJAX and APIs Stage 4 Challenge Answer

Daniel Nitu
Daniel Nitu
13,272 Points

Final code: Live search and results availability check

Hi guys, I wanted to share my code with you. It has the live search function and it also checks if there are any results available and displays a message accordingly.

I removed the search button since there is no need for it anymore.

$('#search').keyup(function (evt) {

    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var searchItem = $('#search');

    var flickrOptions = {
      tags: searchItem.val(),
      format: "json"
    };

    function displayPhotos(data) {
            //check to see if the search returns any results
            if ($.isEmptyObject(data.items) === false) {
                var photoHTML = '<ul>';
                $.each(data.items,function(i,photo) {
                    photoHTML += '<li class="grid-25 tablet-grid-50">';
                    photoHTML += '<a href="' + photo.link + '" class="image">';
                    photoHTML += '<img src="' + photo.media.m + '"></a></li>';
                }); // end each
                photoHTML += '</ul>';
                $('#photos').html(photoHTML);
            } else {
                $('#photos').html('<h1 style="padding:15px">Your search ' + searchItem.val() + ' returned no results!</h1>');
            }
    }
    $.getJSON(flickerAPI, flickrOptions, displayPhotos);

  });

Worked for me! Thanks!

Daniel Nitu
Daniel Nitu
13,272 Points

Glad to help! Good luck! :)

Kenneth Kim
Kenneth Kim
3,795 Points

This is great!. was wondering for a while what might be the syntax to get the length or size of the response data. Thanks.