JSFiddle - React, Tailwind, and code Playground

by TheFiddler

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css">
<p><label class='mesFieldLabel'>
    ya typed:</label><input id='mesText2' type='text' class='mesText' /></p><div class="ui-widget cptarea">
<label class='mesFieldLabel' for="tags">Tags:</label>
<input id="tags" /><span class='testCSS'>type 'ant' for example</span>
</div>
<div class='bugarea'>
    <div>
        <label class='mesFieldLabel'>
            Code:</label><input id='bugid' maxlength="100" />
    </div>
    <div>
        <label class='mesFieldLabel'>
            Category:</label><input id='bugcategory' maxlength="100" />
    </div>
    <div>
        <label class='mesFieldLabel'>
            Bug:</label><input id='bug' maxlength="100" />
    </div><div>
    <label class='mesFieldLabel'>
        Bug Label:</label><input id='bugLabel' maxlength="100" />
    </div>
</div>

CSS

body
{
    font-size: 0.75em !important;
}
span.autoCompleteWord
{
    font-weight: bold;
    background-color: yellow;
}
.bugId
{
    background-color: Lime;
}
#bug, #tags, #bugLabel
{
    width: 10em;
}
.cptarea
{
    background-color: #EEEEEE;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-left: 1em;
    padding-left: 1em;
    margin-top: 0.5em;
    border-color: #BBBBEE;
    border-style: solid;
    border-bottom: 0.01em;
    border-right: 0.03em;
}
.bugarea .mesFieldLabel
{
    line-height: 1.5em;
}

.ui-autocomplete
{
    max-height: 200px;
    overflow-y: auto; /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete
{
    height: 200px;
}
.autoItem
{
    float: left;
}
.autoCompCat
{
    background-color: #FFBBFF;
    font-weight: bold;
    font-style: italic;
}
.autoCompCpt
{
    background-color: #DDFFDD;
    font-weight: bold;
    font-style: italic;
}

JavaScript

var sampleAnswers = [
    {
    "id": "00450",
    "label": "Ants, Ants on a hill near Jill",
    "Category": "Ants",
    "value": "hill ant"},
{
    "id": "00450",
    "label": "Ants, Ant not on a hill",
    "Category": "Ants",
    "value": "regular ant"},
{
    "id": "00452",
    "label": "Some ants on a hill",
    "Category": "Ants",
    "value": "hill ants"},
{
    "id": "00454",
    "label": "Red ants on a hill near Jill",
    "Category": "Ants",
    "value": "hill ant red"},
{
    "id": "00470",
    "label": "Bugs on a rug",
    "Category": "bugs",
    "value": "rug bug"},
{
    "id": "00472",
    "label": "rug bugs under the rug",
    "Category": "bugs",
    "value": "rug bug"},
{
    "id": "69000",
    "label": "bed bugs",
    "Category": "bed",
    "value": "bed bugs"},
{
    "id": "69005",
    "label": "Large complicated bed bugs",
    "Category": "bugs",
    "value": "bed bug"},
{
    "id": "69020",
    "label": "red bed bugs",
    "Category": "bugs",
    "value": "red bugs"}
];
function replaceWords(wordsy, text) {
    //var re = '(' + words.join('|') + ')(?![^<]*(?:<\/script|>))',
    var re = '(' + wordsy + ')(?![^<]*(?:<\/script|>))',
        regExp = new RegExp(re, 'ig'),
        sTag = "<span class='autoCompleteWord'>",
        eTag = "</span>";
    return text.replace(regExp, sTag + '$&' + eTag);
};
$("#tags").autocomplete({
    minLength: 1,
        source: function(request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            
            var resultset = [];
     
            $.each(sampleAnswers, function() {
                var t = this.label;
          
                if (this.value && (!request.term || matcher.test(t)))
                {
                    resultset.push( {
                        label: t.replace(
                                            new RegExp(
                                                "(?![^&;]+;)(?!<[^<>]*)(" +
                                   ...