JSFiddle - React, Tailwind, and code Playground

by Sam Singer

HTML

<div class="ui-widget">
    <label for="tags">Tags:</label>
    <input id="tags">
</div>

CSS

.ui-autocomplete-input {
    width:500px;
}
.ac-item-a {
    text-decoration: underline;
    color: blue;
    font-size: .7em;
    cursor: pointer;
    margin-left: 10px;
}

JavaScript

var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"];

$("#tags").autocomplete({
    source: availableTags,
    select: function (event, ui) {
        var elem = $(event.originalEvent.toElement);
        if (elem.hasClass('ac-item-a')) {
            var url = elem.attr('data-url');
            event.preventDefault();
            window.open(url, '_blank ');
        }
    }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append('<a>' + item.label + '<span class="ac-item-a" data-url="http://www.nba.com">(View Details)</span></a>')
        .appendTo(ul);
};