JSFiddle - React, Tailwind, and code Playground

by gchoken

HTML

<input type="text" class="select"/>
<div class="result">result</div>

<ul class="list">
<li>
<a class="selected" index="0" href="#">Please Choose</a>
</li>
<li>
<a index="1" href="#">Option 1</a>
</li>
<li>
<a index="2" href="#">Option 2</a>
</li>
<li>
<a index="3" href="#">Option 3</a>
</li>
<li>
<a index="4" href="#">Option 4</a>
</li>
<li>
<a index="5" href="#">Option 5</a>
</li>
<li>
<a index="6" href="#">Option 6</a>
</li>
<li>
<a index="7" href="#">Option 7</a>
</li>
<li>
<a index="8" href="#">Option 8</a>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>

JavaScript

$(document).ready(function(){

    $('.select').keyup(function(){
                      
     var val = $(this).val();
    
    $('.list li a:contains(val)').each(function(){
        if($(this).children().length < 1){ 
          $(this).css("border","solid 2px red");
        alert("d");
        }
              
      });
                       
                       
                       
});
    

});