JSFiddle - React, Tailwind, and code Playground

by acbabis

HTML

<form id="search-control">
    <input class="search-text" type="text" size="40" placeholder="Search"/>
    <input type="submit" value="`O" />
</form>
<ul id="output"></ul>

CSS

#search-control input[type="text"] {
    border-radius: 3px;
    border: solid 2px #666;
    padding: 3px;
}

#search-control input[type="submit"] {
    font-weight: bold;
    width: 30px;
    background: #ddf;
    border: solid 2px #445577;
    border-radius: 5px;
    cursor: pointer;
    padding: 3px
}

#search-control input[type="submit"]:focus,
#search-control input[type="submit"]:hover {
    cursor: pointer;
    border-color: #5566cc;
}

#search-control input[type="submit"]:active {
    -webkit-transform: 1px 1px;
    background-color: #aaf;
}

JavaScript

var items = ['Gold', 'Blue', 'Card', 'AmEx', 'Quickbooks'];

(function () {
    var control = $('#search-control');
    var textBox = control.find('.search-text');
    var submit = control.find('input[type="submit"]');
    var savedString = textBox.val();

    function updateSubmitButton(newString) {
        if (newString === savedString) {
            if (newString === '') {
                submit.attr('disabled', 'disabled').val('`O');
            } else {
                submit.removeAttr('disabled').val('X');
            }
        } else {
            submit.removeAttr('disabled').val('`O');
        }
    }
    
    function updateList(newString) {
        $('#output').html('');
        var regex = new RegExp(newString, 'gi');
        items.forEach(function(item) {
            if(item.match(regex)) {
                $('#output').append('<li>'+item+'</li>');
            }
        });
    }

    control.on('submit', function () {
        if ($(':focus')[0] === submit[0] && savedString === textBox.val()) {
            savedString = '';
        } else {
            savedString = textBox.val();
        }
        updateList(savedString);
        updateSubmitButton(savedString);
        return false;
    }).on('blur', 'input', function () {
        setTimeout(function () {
            var focus = $(':focus')[0];
            if (focus !== textBox[0] && focus !== submit[0]) {
                textBox.val(savedString);
                updateSubmitButton(savedString);
            }
        }, 0);
    }).on('keyup', '.search-text', function () {
        console.log(arguments)
        updateSubmitButton(textBox.val());
    });
    
    updateSubmitButton(savedString);
    updateList(savedString);
})();