JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

HTML

<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css">
<label for="tags">Tags:</label>
<input id="tags">

CSS

.header-auto {
    background: gray;
    color: white;
}

JavaScript

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

    $.widget("custom.autocompleteheader", $.ui.autocomplete, {
        _renderMenu: function (ul, items) {
            var self = this;
            $.each(items, function (index, item) {
                self._renderItem(ul, item);
                if (index == 0) ul.prepend('<li class="header-auto"> Header for autocomplete!!</li>');
            });
        }
    });

    $("#tags").autocompleteheader({
        source: availableTags
    });

});