JSFiddle - React, Tailwind, and code Playground

HTML

<div id="refdocs_main">
    <div id="refdocs_input">
        <input type="text" id="refdocs">
    </div>
    <div id="refdocs_wrapper">
        <div id="refdocs_list">
            <ul>
                <li>9094203</li>
                <li>9279863</li>
                <li onclick="doSomething()">9023698</li>
                <li>8993127</li>
                <li>9037891</li>
                <li>(red)</li>
                <li>tiger</li>
                <li>The lion</li>
                <li>Ted</li>
                <li>&lt;input&gt;</li>
                <li>
            </ul>
        </div>
    </div>
</div>

CSS

* {
    font-family: Segoe UI;
    font-size: 9pt;
}
#refdocs {
    border: 0;
    width: 100%;
    height: auto;
    padding-left: 2px;
}
#refdocs_main {
    border: 1px solid rgb(170, 170, 170);
    width: 179px;
    overflow: hidden;
    margin-top: 1px;
}
#refdocs_input {
    border-bottom: 1px solid rgb(170, 170, 170);
    height: 20px;
}
#refdocs_wrapper {
    height: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
}
#refdocs_list {
    width: 100%;
}
#refdocs_list ul {
    margin: 0;
    padding: 0px;
    list-style-type: none;
}
#refdocs_list li {
    cursor: default;
    padding: 2px;
}
.selected {
    background: rgb(228, 228, 228);
}

JavaScript

$('#refdocs_list ul li').click(function () {
    $('#refdocs_list ul li').removeClass('selected');
    $(this).addClass('selected');
    document.getElementById('refdocs').value = $(this).text()
});
function doSomething(){
 alert("you clicked me");
}
$('#refdocs').on('keyup change', function () {
    var search = $(this).val();
    var searchLen = search.length;
    // Case-insensitive search with regex characters escaped
    // For case-sensitive, no regex is needed. Use indexOf() instead of search().
    // Attr: http://stackoverflow.com/a/3561711/2993478
    var regex = new RegExp(
            search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'i');
    $('#refdocs_list li').each(function () {
        var li = $(this);
        var val = li.text();
        if (searchLen === 0) {
            li.show().text(val); // Remove inner markup
            return;
        }
        var index;
        var isMatch = false;
        li.html('');
        while ((index = val.search(regex)) != -1) {
            isMatch = true;
            if (index !== 0) {
                var nonMatch = val.substring(0, index);
                li.append($('<span>').text(nonMatch));
            }
            var match = val.substring(index, index + searchLen);
            val = val.substring(index + searchLen);
            li.append($('<mark>').text(match));
        }
        if (val.length) {
            li.append($('<span>').text(val));
        }
        li.toggle(isMatch); // Optional. Hide non-matches
    });
});