JSFiddle - React, Tailwind, and code Playground
HTML
<div class="ui-widget">
<label for="tags">Tag programming languages: </label>
<textarea id="tags" size="50" />
</div>
<span id="faux" style="display:none;"></span></br>
CSS
#tags {
width: 400px;
}
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"
];
var faux = $("#faux");
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";
}
...