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="Lisbon">Lisbon</a>
    <a href="#" id="place" class="Tokyo">Tokyo</a>
    <a href="#" id="place" class="RiodeJaneiro">Rio de Janeiro</a>
</div>

JavaScript

$(document).ready(function(){ 
    $( "#citysname a" ).each(function() {$(this).hide();});

    $(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();
            }else{
                $(this).hide();
            }            
        });

        if(!city.trim()){
            $( "#citysname a" ).each(function() {
                $(this).hide();
            });
        }
    });
});