JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" media="screen">

<textarea  id="comment" placeholder="mention a friend" style="width:400px;"></textarea>

JavaScript

$(function() {
        var availableTags = ["010101","xxx","yyy","zzz","333","gggg","hhhh","super","user"];
        function split( val ) {
            
            console.log(val.split(' '));
            
            return val.split(' ');
        }
        function extractLast( term ) {

            last = split( term ).pop();            
            if(last == ""){
                return false; //returning false is a dirty way to see the behaviour I'd like to achieve.
                //of course it returns an error though.
            }
            else{
                return last;
            }
        }       
        $( "#comment" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).data( "autocomplete" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                minLength: 3,
                source: function( request, response ) {
                    // delegate back to autocomplete, but extract the last term
                    response( $.ui.autocomplete.filter(
                        availableTags, extractLast( request.term ) ) );
                },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    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 space at the end
                    terms.push( "" );
                    this.value = terms.join(" ");
                    return false;
                }
            });
        

        

 ...