JSFiddle - React, Tailwind, and code Playground

by sauravmishra

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>Chief</li>
                <li>iechf</li>
                <li>History</li>
                <li>Summary</li>
                <li>Ambulatory</li>
                <li>oryion)</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').on('keyup', function () {
    var search = $(this).val();
    $('#refdocs_list li').each(function () {
        var val = $(this).text();
        $(this).toggle( !! val.match(search)).html(
        val.replace(search, function (match) {
            return '<mark>' + match + '</mark>'
        }, 'gi'));
    });
});