JSFiddle - React, Tailwind, and code Playground

by Hawkee

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<textarea id='inputbox' style='width: 400px; height: 90px;'></textarea>

JavaScript

/********************************************************************************
/*
 * triggeredAutocomplete (jQuery UI autocomplete widget)
 * 2012 by Hawkee.com ([email protected])
 *
 * Version 1.3
 * 
 * Requires jQuery 1.7 and jQuery UI 1.8
 *
 * Dual licensed under MIT or GPLv2 licenses
 *   http://en.wikipedia.org/wiki/MIT_License
 *   http://en.wikipedia.org/wiki/GNU_General_Public_License
 *
*/

;(function ( $, window, document, undefined ) {
    $.widget("ui.triggeredAutocomplete", $.extend({}, $.ui.autocomplete.prototype, {

        options:{
            trigger: "@"
        },

        _create:function() {

            var self = this;
            this.id_map = new Object();
            this.stopIndex = -1;
            this.stopLength = -1;
            this.contents = '';
            this.cursorPos = 0;

            // 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);
                var start = contents.substring(0, cursorPos);
                start = start.substring(0, start.lastIndexOf(self.options.trigger));

                this.value = start + self.options.trigger+ui.item.label+' ' + end;

                // Create an id map so we can create...