JSFiddle - React, Tailwind, and code Playground

by ecropolis

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<div class="queryedit"><textarea></textarea></div>

CSS

.queryedit { position: relative; padding: 5px; border-radius: 6px; border: 1px solid #d3d3d3; width: 456px; }
.queryedit textarea { width: 450px; height: 92px; border:inherit; font-family: arial, 'sans-serif'; font-size: 14px; }
.queryedit .fields { 
    display: none;
position: absolute;
    bottom: -1362px;
    left: 0;
z-index: 1000;
width: 448px;
font-size: .8em;
font-family: arial;
border: 1px solid gray;
background: rgb(247, 247, 247);
border-radius: 8px;
height: auto;
padding: 2%; }
.queryedit .fields > li { display: inline-block; width: 46%; padding: 3px; cursor: pointer; }
.queryedit .fields > li:hover { background-color: #DDD; color: FFF; }
.queryedit .fields > li a:focus { color: green; font-weight: bold; }
.queryedit .field { display:none; }

JavaScript

evolvui = {};
evolvui.init = function(){
    $instance = $('.queryedit');
    $instance.typeinput = $instance.find('textarea');
    $instance.typeinput.attr('tabindex',1);
    $instance.typeinput.keyup(function(event) {
        console.log(event.which);
        if((event.which > 64 && event.which < 91) || (event.which > 47 && event.which < 58) || (event.which == 190) || (event.which == 8)|| (event.which == 189)) { 
           var inputval = $instance.typeinput.val().split(/,?\s+/);
           var current = _.last(inputval);
           evolvui.fieldsUI(current,$instance); //evolvui.fieldsUI.fieldMaker(evolvui.fieldsUI.filterFields(current),$instance);
        } else if (event.which === 32) {
             evolvui.fieldsUI.resetFields($instance) 
        }
            if(event.which == 13)
                console.log('enter')
    });
    $instance.typeinput.on('click',function(){
        word = evolvui.fieldsUI.currentWord(this.value,this.selectionStart);
    });

}
evolvui.fieldsUI = function(filter,$instance) {
    var $ul = $instance.find('ul.fields');
    if( !$ul.length ){
        $ul = $('<ul/>',{'class':'fields'});
        $instance.append($ul);
        $ul.css('bottom',(($ul.height()+20)*-1)+'px');
    } else {
         $ul.find('li').show();
    }
    var fieldset = filter;
    if(typeof filter != 'undefined' && filter != '' && filter != ' ' )
        fieldset = evolvui.fieldsUI.filterFields(filter)
    numFields = evolvui.fieldsUI.fieldMaker(fieldset,$instance);
    if(numFields > 0) {
        $ul.slideDown('fast',function(){
            $ul.css('bottom',(($ul.height()+20)*-1)+'px');
        });
    } else {
        $ul.hide();
    }
    return null;
}
evolvui.fieldsUI.fieldMaker = function(fieldset,$instance) {
    $obj = $instance.find('ul.fields');
    $obj.find('li').hide();
    var i = 0;
    $.each(fieldset, function( index, field ) {
        i++
        $('.fields').append($('<li><a tabindex="'+(index+1)+'">'+field+'</a></li>')
               ...