JSFiddle - React, Tailwind, and code Playground

by sQu1rr

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css">
<input><span></span>

JavaScript

var NOTHING = 'Nothing is chosen';

var chosen = NOTHING;

var $span = $('span').html(chosen);

$('input').autocomplete({
    source: [
        'ActionScript',
        'AppleScript',
        'Asp',
        'BASIC',
        'C',
        'C++',
        'Clojure',
        'COBOL',
        'ColdFusion',
        'Erlang',
        'Fortran',
        'Groovy',
        'Haskell',
        'Java',
        'JavaScript',
        'Lisp',
        'Perl',
        'PHP',
        'Python',
        'Ruby',
        'Scala',
        'Scheme'
    ],
    response: function(event, ui) {
        chosen = NOTHING;
        if (ui.content.length) {
            for (var i = 0; i < ui.content.length; ++i) {
                if (ui.content[i].label.toLowerCase() == $('input').val().toLowerCase()) {
                    chosen = ui.content[i].label;
                    break;
                }
            }
        }
        $span.html(chosen);
    }
});