JSFiddle - React, Tailwind, and code Playground

by yomoore

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>
    
    <div id="container1"  >
        <form name="SEARCH" onsubmit="startSearch('SEARCH');return false;">
            <input id="searchText" type="text" class="search_input" onblur="Ditto(this.value)" autocomplete="off" >
            <div class="hg">
                <div id="suggest">
                </div>
            </div>
            
            
        </div>
            
        </form>
    </div>   
    
    
    
    
    
    <body>
    </body>
</html>

CSS

.current{
    background:#E0ECF8;
}

JavaScript

// our document is ready 
$(document).ready(function() {



    // init Bing API variables
    var AppId = "AppId=86F7F70727A6D88CCE422ED44905A378E9780D81"; // bing API ID
    var Query = "Query=";
    var Sources = "Sources=Web+Image+Video+RelatedSearch";
    var Version = "Version=2.2";
    var Market = "Market=en-us";
    var WebCount = "Web.Count=10";
    var WebOffset = "Web.Offset=0";
    var ImgCount = "Image.Count=8";
    var ImgOffset = "Image.Offset=0";
    var VideoCount = "Video.Count=4";
    var VideoOffset = "Video.Offset=0";

    // temp
    var lastSearch = '';
    var lastResult = '';
    var lastSuggestSearch = '';
    var lastSuggestResult = '';

    // perform search   


    function doSearch(search, suggest, validate) {

        if (suggest == null) {
            suggest = true;
        }
        if (validate == null) {
            validate = false;
        }

        // if our search is not blank AND is not what we last searched for
        if ((search != '') && (search != lastSearch)) {

            lastSearch = search;

            // encode our search query to send to Bing
            searchEnc = encodeURIComponent(search);

            // set our HTTP GET path
            var arr = [AppId, Query + searchEnc, Sources, Version, WebCount, WebOffset, ImgCount, ImgOffset, VideoCount, VideoOffset, "JsonType=callback", "JsonCallback=?"];
            var requestStr = "http://api.bing.net/json.aspx?" + arr.join("&");

            // add a throbber
            $("#searchText").addClass('throbber');

            // make the call
            $.ajax({
                type: "GET",
                url: requestStr,
                dataType: "jsonp",
                cache: true,
                timeout: 5,
                success: function(msg) {
                    if ((lastSearch != '') && (validate != true)) {
                        // process the search result
                        SearchCompleted(msg, search);
                    } else if...