Filters - Location

<div class="location-filters">
    <!-- Mobile -->
    <div>
        <button type="button" class="btn btn-info hidden-lg js-filter" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            <i class="fa fa-filter"></i>
        </button>
    </div>

    <!-- Desktop -->
    <div class="location-filters__control" id="collapseExample">
        <div class="location-filters__wrap">
            <label for="location">Showing services available for</label>
            <select class="location-filters-select js-location-select" id="location">
                <option>Everywhere</option>

                <optgroup label="WASHINGTON DC">
                    <option>2020 M Street, Washington - 20006</option>
                </optgroup>

                <optgroup label="ARKANSAS">
                    <option>3300 Market Street, Suite 205, Rogers - 72758</option>
                </optgroup>

                <optgroup label="CALIFORNIA">
                    <option>203 West Olive Avenue, Burbank - 91502</option>
                    <option>231 West Olive Avenue, Burbank - 91502</option>
                    <option>2900 West Alameda Avenue, Burbank - 91505</option>
                    <option>1575 N Gower Street, Hollywood - 90028</option>
                    <option>12910 Culver Boulevard, Los Angeles - 90066</option>
                    <option>5555 Melrose Avenue, Los Angeles - 90038</option>
                    <option>7800 Beverly Road, Los Angeles - 90036</option>
                    <option>235 Second Street, San Francisco - 94105</option>
                    <option>12001 Ventura Place, Studio City - 91604</option>
                    <option>4024 Radford Ave., Studio City - 91604</option>
                    <option>7150 Hayvenhurst Avenue, Van Nuys - 91406</option>
                    <option>1041 N. Formosa Ave., West Hollywood - 90046</option>
                    <option>700 N. San Vicente Blvd.,, West Hollywood - 90069</option>
                </optgroup>

                <optgroup label="FLORIDA">
                    <option>161 N.W. 6th Street,, Miami - 33136</option>
                </optgroup>

                <optgroup label="ILLINOIS">
                    <option>130 East Randolph Street, Chicago - 60601</option>
                </optgroup>

                <optgroup label="MICHIGAN">
                    <option>360 North Main Street, Royal Oak - 48067</option>
                </optgroup>

                <optgroup label="MINNESOTA">
                    <option>80 S. Eighth Street, Minneapolis - 55402</option>
                </optgroup>

                <optgroup label="MONTANA">
                    <option>224 W Spruce Street, Missoula - 59802</option>
                </optgroup>

                <optgroup label="NEW JERSEY">
                    <option>11 Airport Road, Morristown - 07960</option>
                </optgroup>

                <optgroup label="NEW YORK">
                    <option>300 New Highway,, Hauppauge - 11788</option>
                    <option>35 Adams Avenue, Hauppauge - 11788</option>
                    <option>1515 Broadway, New York - 10036</option>
                    <option>1633 Broadway, New York - 10019</option>
                    <option>28 E 28th Street,, New York - 10016</option>
                    <option>345 Hudson Street, New York - 10014</option>
                    <option>51 W 52nd Street, New York - 10019</option>
                    <option>524 W 57th Street, New York - 10019</option>
                    <option>555 W 57th Street, New York - 10019</option>
                    <option>604 W. 52nd St., New York - 10019</option>
                </optgroup>

                <optgroup label="TENNESSEE">
                    <option>330 Commerce Street, Nashville - 37201</option>
                </optgroup>

                <optgroup label="UTAH">
                    <option>1557 West Innovation Way, Lehi - 84043</option>
                </optgroup>

                <optgroup label="WASHINGTON">
                    <option>601 108th Avenue Northeast, Bellevue - 98004</option>
                </optgroup>

                <optgroup label="ARGENTINA">
                    <option>Cuyo No. 1874 (Tanti), Bahia Blanca</option>
                    <option>O'higgins No. 266/277 & Berutti No. 54, Bahia Blanca</option>
                    <option>Asuncion St. No. 949 (Ronda), Buenos Aires</option>
                    <option>Fleming 1101 (Teleinde), Buenos Aires</option>
                    <option>Leandro N. Alem Av. No. 719, Buenos Aires</option>
                    <option>Matheu 1558 And 1560 (Plot 1), Buenos Aires</option>
                    <option>Velez Sarsfield Av. No. 4300, Cordoba</option>
                    <option>Luro 2907, Mar Del Plata</option>
                    <option>Riavitz 7, Neuquen</option>
                    <option>Belgrano Av. No. 1055, Rosario</option>
                    <option>Spain St. No. 475, Salta</option>
                    <option>Laprida No. 130, San Miguel De Tucu</option>
                    <option>Galvez St. No. 840, Santa Fe</option>
                </optgroup>

                <optgroup label="AUSTRALIA">
                    <option>1 Saunders Street, Prymont - NSW 2009</option>
                    <option>4-16 Yurong Street, Sydney</option>
                </optgroup>

                <optgroup label="BELGIUM">
                    <option>Rue De La Science 14, Brussels</option>
                </optgroup>

                <optgroup label="BRAZIL">
                    <option>311 Av. Rio Branco, Rio de Janeiro</option>
                    <option>Rua Doutor Renato Paes De Barros, 1017, Sao Paulo - 04530-001</option>
                </optgroup>

                <optgroup label="CANADA">
                    <option>26 Duncan Street,, Toronto - M5V 2B8</option>
                </optgroup>

                <optgroup label="CHINA">
                    <option>5/F United Centre,, Hong Kong</option>
                </optgroup>

                <optgroup label="CZECH REPUBLIC">
                    <option>371 Cadastral Area Stare Mesto, Prague</option>
                </optgroup>

                <optgroup label="FINLAND">
                    <option>Mannerheiminaukio 1, Helsinki</option>
                </optgroup>

                <optgroup label="FRANCE">
                    <option>22 rue Jacques Dulud, Paris</option>
                </optgroup>

                <optgroup label="GERMANY">
                    <option>Boxhagener Strasse 79/80, Berlin - 10245</option>
                    <option>10 Betastrasse, Unterfohring</option>
                </optgroup>

                <optgroup label="HUNGARY">
                    <option>134 Bocskai ut, Budapest</option>
                </optgroup>

                <optgroup label="ITALY">
                    <option>5/7 Corso Europa, Milan</option>
                </optgroup>

                <optgroup label="JAPAN">
                    <option>4-3-1 Toranomon, Tokyo - 105-6006</option>
                </optgroup>

                <optgroup label="MEXICO">
                    <option>Av. Paseo de las Palmas 425, Col. Lomas de Chapultepec</option>
                    <option>Paseo de los Tamarindos No. 400, Mexico City</option>
                </optgroup>

                <optgroup label="NETHERLANDS">
                    <option>Gerrit Van Der Veenstraat 9-11, Amsterdam - 1077DM</option>
                    <option>NDSM-Plein 6, Amsterdam - 1033 WB</option>
                </optgroup>

                <optgroup label="NEW ZEALAND">
                    <option>303 Parnell Road, Parnell, Auckland</option>
                </optgroup>

                <optgroup label="POLAND">
                    <option>Mokotowska 19, Warsaw</option>
                </optgroup>

                <optgroup label="PORTUGAL">
                    <option>Avenida Da Liberdade 245, 5 G, Lisbon - 1250-143</option>
                </optgroup>

                <optgroup label="SINGAPORE">
                    <option>151 Lorong Chuan, Singapore - 556741</option>
                </optgroup>

                <optgroup label="SOUTH AFRICA">
                    <option>2 Bruton Road, Bryanston, Johannesburg - 2191</option>
                </optgroup>

                <optgroup label="SPAIN">
                    <option>3 Calle de Albacete, Madrid</option>
                    <option>33 Paseo de Recoletos, Madrid</option>
                </optgroup>

                <optgroup label="TAIWAN">
                    <option>44 Zhongshan N. Road, Taipei - 10448</option>
                </optgroup>

                <optgroup label="UNITED ARAB EMIRATES">
                    <option>Tecom Zone, Dubai</option>
                </optgroup>

                <optgroup label="UNITED KINGDOM">
                    <option>566 Chiswick High Road, London</option>
                </optgroup>
            </select>
        </div>
    </div>
</div>

.location-filters {
  display: flex;
  justify-content: flex-end;

  .location-filters__control {
    display: none;

    &.is-active {
      display: block;
    }

    @media (min-width: $breakpoint-desktop) {
      display: block;
    }
  }

  .location-filters__wrap {
    color: $color-base-blue;
    background-color: $color-blue-light;
    padding: 1.2rem 2.4rem;
  }

  .location-filters-select {
    min-width: 20rem;
    text-align: left;
  }
}

// Init Select2
$(".js-location-select")
  .select2({
    matcher: groupMatcher,
    width: 200,
  })
  // Custom search placeholder text
  .one("select2:open", function () {
    $("input.select2-search__field").prop("placeholder", "Search by location");
  });

$(".js-filter").on("click", function () {
  const $btn = $(this);
  const $target = $(this.dataset.target);
  $target.addClass("is-active");
  $btn.hide();
});

function groupMatcher(params, data) {
  let modifiedData;
  let currChildrenArray = [];

  // Always return the object if there is nothing to compare
  if (typeof params.term === "undefined") return data;

  // Check if the item text contains the term
  if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
    modifiedData = $.extend({}, data, true);
    return modifiedData;
  }

  // Merge the data
  modifiedData = $.extend(modifiedData, data, true);

  // Check `data.children` options to match against
  $.each(data.children, function (index, elem) {
    if (elem.text.toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
      currChildrenArray.push(elem);
    }
  });

  // If we matched any of the item's children, then return the group object
  if (currChildrenArray.length > 0) {
    modifiedData.children = currChildrenArray;
    return modifiedData;
  }

  // If it doesn't contain the term, don't return anything
  return null;
}