JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="" autofocus="false"/>

JavaScript

var triggered = false;
var trigger = "@";

	
    $("input").autocomplete({
    source: [
        "AAB",
        "AAC",
        "CCE",
        "CCG",
        "IIU",
        "IIO"
        ],
    search: function() {
        if (!triggered) {
            return false;      
        }
       
    },
    select: function(event, ui) {
        var text = this.value;
        var pos = text.lastIndexOf(trigger);
      
        this.value = text.substring(0, pos + trigger.length) + ui.item.value;
        
        triggered = false;
        
        return false;
    },


    focus: function() { return false; },
    minLength: 0
}).on("keyup", function() {
    var text = this.value;
    var len = text.length;
    var last;
    var query;
        
        if(this.value == ""){
        	triggered = false;
            $("input").autocomplete( "close" );
        }

    
    if (triggered) {
    	
        index = text.lastIndexOf(trigger);
        query = text.substring(index + trigger.length);
        $(this).autocomplete("search", query);
        

        if (index === -1)
        {
        	//console.log("abb");
        	//console.log(triggered);

        	triggered =false;

        	//console.log(triggered);
        	//console.log(last);
        	//console.log(trigger);
        }

    }
    else if (len >= trigger.length) {
    	console.log("ELSE IF")
        last = text.substring(len - trigger.length);
        triggered = (last === trigger);
    }

});