JSFiddle - React, Tailwind, and code Playground

by pratik24

HTML

<div id="stringcodes">
    <label for="selectcodes"></label>
    <input id="selectcodes" size="25">
    <textarea id="selectcodes-log"></textarea>
</div>
<div id="numbercodes">
    <label for="selectnumbercodes"></label>
    <input id="selectnumbercodes" size="25">
        <textarea id="selectnumbercodes-log"></textarea>
</div>

JavaScript

/*JSON data, JavaScript object fotr string codes*/
var tag = [
    "abc",
    "efg",
    "qrst"];
/* this function logs the selected autocomplete option into the textarea */
function selectcodes_log(message) {$("#selectcodes-log").val(function () {return this.value + "codes= " + message + ', '}).prependTo("#selectcodes-log");  }

/*selects multiple autocomplete values */
$("#selectcodes")
    .bind("keydown", function (event) {
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) {
        event.preventDefault();
    }
})
/* jquery ui autocomplete */.autocomplete({
    minLength: 0,
    source: function (request, response) {
        // delegate back to autocomplete, but extract the last term
        response($.ui.autocomplete.filter(
        tag, extractLast(request.term)));
    },
    focus: function () {
        // prevent value inserted on focus
        return false;
    },
    select: function (event, ui) {

        selectcodes_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("");
        this.value = terms.join(", ");
        $(this).val("");
        return false;
    }
});
/* JSON data JavaScript objects for number codes */
var nummbercode= [
    "123",
    "234",
    "345"];
/* this function logs the selected autocomplete number code option option into the textarea */
function selectnumbercode_log(message) {
    $("#selectnumbercodes-log").val(function () {return this.value + "codes= " + message + ', '}).prependTo("#selectnumbercodes-log");  }

/*selects multiple autocomplete values */
$("#selectnumbercodes")
    .bind("keydown", function (event) {
    if (event.keyCode === $.ui.keyCode.TAB &&...