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>9023698</li>
					<li>8993127</li>
					<li>9037891</li>
					<li>(red)</li>
					<li>tiger</li>
					<li>The lion</li>
					<li>Ted</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()
});

    
$('#refdocs').keyup(function (event) {
    var text = $(this).val();
    $('#refdocs_list ul li').each(function () {
        var elem = $(this);
        elem.removeClass('selected');
        if (elem.html().indexOf(text) != -1) {
            elem.addClass('selected');
        }
    });
});