JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<input placeholder="Search Me" id="box" type="text" />
<ul class="navList">
    <li>VETE60NH</li>
    <li>VMLU60FO</li>
    <li>VETE60MH</li>
    <li>VBHD60XB</li>
    <li>VBHD60XP</li>
   
</ul>

JavaScript

$('.navList').hide();
$('#box').keyup(function () {


var lengthcheck = this.value.length;
if(lengthcheck == 0)
{
   $('.navList').hide();
}
else
{
$('.navList').show();
}

    var valThis = this.value.toLowerCase(),
        lenght  = this.value.length;


    $('.navList>li').each(function () {
        var text  = $(this).text(),
            textL = text.toLowerCase(),
            htmlR = '<b>' + text.substr(0, lenght) + '</b>' + text.substr(lenght);
        (textL.indexOf(valThis) == 0) ? $(this).html(htmlR).show() : $(this).hide();
    });
    
    

});