JSFiddle - React, Tailwind, and code Playground

by Justin

HTML

<div class="mxb-locations-mobile">
    <!-- LOCATION DETAILS -->
    <!-- LOCATION SELECTOR -->
    <div class="mxb-locations-mobile-location-selector">
         <h2 class="mxb-locations-mobile-country-title">
              Australia:
          </h2>

        <div>
            <input type="text" id="filterList" />
        </div>
        <div class="mxb-location-item" id="mxb-location-item-blacktown"> <a href="/mobile/locations/australia/blacktown">
              <div class="mxb-location-item-text">
                                                      Blacktown
                                                </div>
            </a>

        </div>
        <div class="mxb-location-item" id="mxb-location-item-bondi-junction"> <a href="/mobile/locations/australia/bondi-junction">
              <div class="mxb-location-item-text">
                                                      Bondi Junction
                                                </div>
            </a>

        </div>
        <div class="mxb-location-item" id="mxb-location-item-castle-hill"> <a href="/mobile/locations/australia/castle-hill">
              <div class="mxb-location-item-text">
                                                      Castle Hill
                                                </div>
            </a>

        </div>
        <div class="mxb-location-item" id="mxb-location-item-charlestown"> <a href="/mobile/locations/australia/charlestown">
              <div class="mxb-location-item-text">
                                                      Charlestown
                                                </div>
            </a>

        </div>
        <div class="mxb-location-item" id="mxb-location-item-chippendale"> <a href="/mobile/locations/australia/chippendale">
              <div class="mxb-location-item-text">
                                                      Chippendale
                                                </div>
            </a>

        </div>
       ...

CSS

body{background-color:rgb(54, 0, 0)}
a {color: #fff}
h2 {color:rgb(250, 166, 26);}
.mxb-locations-mobile {max-width: 400px; text-align: center}

JavaScript

$('#filterList').keyup(function () {
    search = $(this).val().toLowerCase();
    $('.mxb-location-item-text').each(function () {
        if ($(this).text().toLowerCase().indexOf(search) == -1) {
            $(this).parent().parent().hide();
        } else {
            $(this).parent().parent().show();
        }
    })

})