JSFiddle - React, Tailwind, and code Playground

by Joel Ferreira

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<br />
<table width="100%" border="0">
  <tr>
    <td>
        <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input id="tags" />
        </div>
    </td>
    <td>
        <div id="results" style="border-width: 2px; border-style: dotted; border-color: red; "> I would like to see the results here </div>
    </td>
  </tr>
</table>

JavaScript

$(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags,
            open: function() {
                $(this).autocomplete("widget")
                       .appendTo("#results")
                       .css("position", "static");
            }
        });
    });