JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ui-widget">
<label for="tags">SQL Query: </label>
<input id="tags" size="50" />
</div>
<span id="faux" style="display:none;"></span></br>

CSS

#tags {
    width: 200px;
}

JavaScript

var availableTags = [
    "SELECT",
    "FROM",
    "WHERE",
    "AS",
    "JOIN",
    "OUTER",
    "INNER"
];
var otherTags = [
		"SELECT",
    "FROM",
    "WHERE",
    "AS",
    "JOIN",
    "OUTER",
    "INNER"
];
var faux = $("#faux");
var offsets;
var arrayused;
var calcfaux;
var retresult;
var checkspace;
var contents = $('#tags')[0];
var carpos;
var fauxpos;
var tier;
var startss;
var endss;
function getCaret(el) {
  if (el.selectionStart) {
    return el.selectionStart;
  } else if (document.selection) {
    el.focus();

    var r = document.selection.createRange();
    if (r == null) {
      return 0;
    }

    var re = el.createTextRange(),
        rc = re.duplicate();
    re.moveToBookmark(r.getBookmark());
    rc.setEndPoint('EndToStart', re);

    return rc.text.length;
  } 
  return 0;
}

                function split( val ) {
                return val.split( / \s*/ );
                }
                function extractLast( term ) {
                return split( term ).pop();
                }
                $( "#tags" )
                .on( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
                }
                })
                .click( function( event ) {
                carpos = getCaret(contents);
                fauxpos = faux.text().length;
                if(carpos < fauxpos) {
                tier = "close";
                $(this).autocomplete( "close" );
                startss = this.selectionStart;
                endss = this.selectionEnd;
                $(this).val( $(this).val().replace(/ *$/,''));
                this.setSelectionRange(startss, endss);
                }
                else
                {
                tier = "open";
                }                 
               
                })
                .on( "keyup", function( event ) {
               ...