JSFiddle - React, Tailwind, and code Playground

by tuga

HTML

<input type="text" id="searchcity">
<div id="citysname">
    <a href="#" id="place" class="NewYork">New York</a>
    <a href="#" id="place" class="SanFrancisco">San Francisco</a>
    <a href="#" id="place" class="Paris">Paris</a>
    <a href="#" id="place" class="Palma">Palma</a>
    <a href="#" id="place" class="Tokyo">Tokyo</a>
    <a href="#" id="place" class="RiodeJaneiro">Rio de Janeiro</a>
</div>

CSS

.highlight{
    background-color:yellow;
}

JavaScript

$(document).ready(function(){  

    $(document).on("keyup", "#searchcity", function(){
        var city = $(this).val();

        $( "#citysname a" ).each(function() {
            var classCity = $(this).attr("class")
            var matcher = new RegExp("^"+city, "i");
            if (matcher.test(classCity)) {  
                $(this).show().addClass('highlight');
            }            
        });
        
                if(!city.trim()){
            $( "#citysname a" ).each(function() {
                $(this).removeClass('highlight');
            });
        }
        
    });
});