JSFiddle - React, Tailwind, and code Playground

by sushanth009

HTML

<input type="text" />
<ul id="theList">
    <li>xxvxvxx</li>
    <li>yyyyyyyyyy</li>
    <li>rrrrrrrrrr</li>
    <li>vvvvvvvvvvv</li>
    <li>xcvcvdfsdf</li>
    <li>hkjhkhjkh</li>
    <li>xzfgfhfgh</li>
</ul>

CSS

/* Edit the CSS to style the tooltip */
 .disabledButtonDiv:hover:after {
    position:relative;
    top:10px;
    left:0px;
    border:1px solid #000;
    background-color:#ffc;
    color:#000;
    padding: 3px;
    font-size: 12px;
    text-align: center;
    content: attr(faketitle);
}

JavaScript

$('input').keyup(function() {
    filter(this); 
});

function filter(element) {
    var value = $(element).val();
    $("#theList > li").each(function () {
        if ($(this).text().indexOf(value) > -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
}