JSFiddle - React, Tailwind, and code Playground

HTML

<div id="secondary" style="min-width:100px; min-height: 10px; float:left">write any character from a to f
    <br/>
    <label for="somechar"></label>
    <input id="somechar" size="22">
    <br>
    <textarea id="some-log" class="log" class="ui-widget-content"></textarea>
</div>

JavaScript

var secondary = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f"];

function some_log(thought) {
    $("#some-log").append(thought+ ", ").prependTo("#some-log");
}

$("#somechar") /* this function is required when selecting multiple values */
.bind("keydown", function (event) {
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) {
        event.preventDefault();
    }
})

    .autocomplete({
    minLength: 0,
    source: function (request, response) {
        // delegate back to autocomplete, but extract the last term
        response($.ui.autocomplete.filter(
        secondary, extractLast(request.term)));
    },
    focus: function () {
        // prevent value inserted on focus
        return false;
    },
    select: function (event, ui) {

        some_log(ui.item ? 
                          ui.item.value :
            "Nothing selected, input was " + this.value);

        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        return false;
    }
});