JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<div contenteditable="true" id='inputbox'>
  This text can be edited by the user.
</div>

JavaScript

;(function ( $, window, document, undefined ) {
    $.widget("ui.triggeredAutocomplete", $.extend(true, {}, $.ui.autocomplete.prototype, {
        
        options: {
            trigger: "@",
            allowDuplicates: true
        },

        _create:function() {

            var self = this;
            this.id_map = new Object();
            this.stopIndex = -1;
            this.stopLength = -1;
            this.contents = '';
            this.cursorPos = 0;
            
            /** Fixes some events improperly handled by ui.autocomplete */
            this.element.bind('keydown.autocomplete.fix', function (e) {
                switch (e.keyCode) {
                    case $.ui.keyCode.ESCAPE:
                        self.close(e);
                        e.stopImmediatePropagation();
                        break;
                    case $.ui.keyCode.UP:
                    case $.ui.keyCode.DOWN:
                        if (!self.menu.element.is(":visible")) {
                            e.stopImmediatePropagation();
                        }
                }
            });

            // Check for the id_map as an attribute.  This is for editing.

            var id_map_string = this.element.attr('id_map');
            if(id_map_string) this.id_map = jQuery.parseJSON(id_map_string);

            this.ac = $.ui.autocomplete.prototype;
            this.ac._create.apply(this, arguments);

            this.updateHidden();

            // Select function defined via options.
            this.options.select = function(event, ui) {
                var contents = self.contents;
                var cursorPos = self.cursorPos;

                // Save everything following the cursor (in case they went back to add a mention)
                // Separate everything before the cursor
                // Remove the trigger and search
                // Rebuild: start + result + end

                var end = contents.substring(cursorPos, contents.length);
      ...