JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

JavaScript

function OnLoad() {
    
    console.log("onload");
    
    // create a tabbed mode search control
    var tabbed = new google.search.SearchControl();
    
    
    
    //restrict results: search only moderated
    //tabbed.setRestriction(google.search.RESTRICT_SAFESEARCH, google.search.SAFESEARCH_STRICT);
    
    // Set the Search Control to get the most number of results
    tabbed.setResultSetSize(google.search.Search.LARGE_RESULTSET);
    
    // create image searchers.
    tabbed.addSearcher(new google.search.ImageSearch());
    
    
    // proprofscc: On search completeion
    tabbed.setSearchCompleteCallback(this, bind_event);
    
    // draw in tabbed layout mode
    var drawOptions = new google.search.DrawOptions();
    drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
    
    // Draw the tabbed view in the content div
    tabbed.draw(document.getElementById("googleImageSearch"), drawOptions);
    
    // Search!
    tabbed.execute("");
}


function bind_event() {


    $("a.gs-image").bind("click", function (e) {
        $("#hidden-upload-image").attr("src", $(this).children("img").attr('src'));
        
        //alert($(this).children("img").attr('src'));
        
        $("#imageContainer").html('<img src="' + $(this).attr('href') + '" alt="Loading Image..." />');

        
        $("a.gs-image img").removeClass();
        $("a.gs-image img").addClass("gs-image");
        $(this).find("img").removeClass();
        $(this).find("img").addClass("selectImage");
        
        if ($(".gs-imageResult").length <= 0) {
            $("#gsearchErr").css("display", "block");
        } else {
            $("#gsearchErr").css("display", "none");
        }
        
        return false;
    });
    
    $("div.gsc-cursor").prepend("<div class='clear' style='margin-top:10px;clear:both;'></div>");
    
    $(".gsc-trailing-more-results").css("display", "none");
    
}

$().ready(function() {
    
    google.load("search", "1", {...