JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<div class="demo">
     <h2 class='h2'>Artist Suggestion Demo </h2>
    
    <div class="ui-widget">
        <label for="artist">Enter an artist:</label>
        <input id="artist" />
    </div>
    <div class="ui-widget">Result:
        <div id="log" class="ui-widget-content"></div>
        <div id="log2"></div>
    </div>
</div>

CSS

body {
        margin:20px;
        font-family: Ariel
    }
    .ui-autocomplete-loading {
        background: white url('ui-anim_basic_16x16.gif') right center no-repeat;
    }
    .ui-widget {
        margin-top:20px
    }
    #artist {
        width: 20em;
    }
    #log {
        height: 24px;
        width: 532px;
    }
    #log2 {
        height:50px;
        width:532px;
        border:1px solid black;
    }

JavaScript

$(function () {
    //$("#artist").live('keyup', function () {
        //var main_input_id = $(this).attr('id');
        $("#artist").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "http://www.rocktfan.com/fetchArt.php",
                    type: "GET",
                    async: false,
                    data: {
                        term: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.label,
                                value: item.value,
                                id: item.id
                            };
                        }));
                    }
                });
            },
            minLength: 2,
            select: function (event, ui) {
                $("#log").empty();
                $("#log").append(ui.item ? ui.item.id + ' ' + ui.item.label : '(nothing)');
                //getGen(ui.item.id);
            }
        });
    //});
});

function getArt() {

    $("#artist").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "http://developer.echonest.com/api/v4/artist/suggest",
                dataType: "jsonp",
                async: false,
                data: {
                    results: 12,
                    api_key: "LC1R0KW4UXO5PBX8C",
                    format: "jsonp",
                    name: request.term
                },
                success: function (data) {
                    response($.map(data.response.artists, function (item) {
                        return {
                            label: item.name,
                            value: item.name,
                            id: item.id
                        };
                    }));
                }
            });
        },
       ...