JSFiddle - React, Tailwind, and code Playground

by kritya

HTML

<input id="main"/>
<ol>
    <li id="1">Content1</li>
    <li id="2">Content2</li>
    <li id="3">Content3</li>
    <li id="4">Content4</li>
    <li id="5">Content5</li>
    <li id="6">Content6</li>
    <li id="7">Content7</li>
    <li id="8">Content8</li>
    <li id="9">Content9</li>
    <li id="10">Content10</li>
    <li id="11">Content11</li>
    <li id="12">Content12</li>
    <li id="13">Content13</li>
</ol>

CSS

span.highlight
{
    color:red;
}

JavaScript

$("li").each(function() { 
    $(this).attr('data-original', $(this).text());
    $(this).attr('data-original-l', $(this).text().toLowerCase());
}).hide();

$("#main").keyup(function() {
    $("li[data-original-l*=\""+$("#main").val().toLowerCase()+"\"]").show().each(function() {
        var content = $("#main").val();
        $(this).html($(this).data('original').replace(new RegExp(content,"i"), "<span class='highlight'>$&</span>"));
    })
});

//"<span class='highlight'>" +