JSFiddle - React, Tailwind, and code Playground

by naveen

HTML

<input type="text" id="selectedInput"/>
<ul id="list"></ul>

JavaScript

$("input#selectedInput").bind("autocompleteselect", function (event, ui) {
alert("Sel item " + JSON.stringify(ui.item.json));
}).autocomplete({
appendTo: "#list",
source: function (request, response) {
    //alert("success");
    $.ajax({
        url: "http://itunes.apple.com/search?term=jack+johnson&entity=musicTrack",
        dataType: "jsonp",
        data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            name_startsWith: request.term
        },

        success: function (data) {
            response($.map(data.results, function (item) {
                itunesJson = item;
                return {
                    label: "<li><img src='" + item.artworkUrl30 + "' alt='no photo'/>" + item.trackName + "</li>",
                }
            }));
            var elm = $("#list");
            elm.html(elm.text());
        },
    });
}
})