JSFiddle - React, Tailwind, and code Playground
HTML
<input id="ListenToInput" type="text" name="txt" class="" value="" />
CSS
.customclass {
font-size:10px;
color:grey;
}
JavaScript
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
return $("<li>")
.append($("<a>").text(item.label)
.append($("<a class='customclass'>").text(item.by)))
.appendTo(ul);
};
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function (ul, items) {
var that = this,
currentCategory = "";
$.each(items, function (index, item) {
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
that._renderItemData(ul, item);
});
}
});
var cache = {};
function GetTracks(request, response) {
$.get("http://ws.spotify.com/search/1/track.json", {
q: request.term
}, function (data) {
$.merge(cache[request.term],
$.map(data.tracks.slice(0, 5), function (item) {
return {
label: item.name,
by: item.artists[0].name,
category: "Track"
};
}));
console.log(cache[request.term]);
response(cache[request.term]);
});
}
function GetArtist(request, response) {
$.get("http://ws.spotify.com/search/1/artist.json", {
q: request.term
}, function (data) {
$.merge(cache[request.term],
$.map(data.artists.slice(0, 5), function (item) {
return {
label: item.name,
by: "",
category: "Artist"
};
}));
response(cache[request.term]);
});
}
$(function () {
$("#ListenToInput").catcomplete({
delay: 0,
source: function (request, response) {
if (cache[request.term]) {
return response(cache[request.term]);
} else {
cache[request.term] = [];
GetTracks(request, response);
GetArtist(request,...