missionary search

index.html

<div class="container">
  
  <div id="missionary-page-search" class="map-search"><span class="map-search-icon map-search-icon-search"></span>
			<span class="map-search-icon map-search-icon-loading"></span>
			<span class="map-search-icon map-search-icon-close"></span>
			<input type="text" name="map-search" placeholder="Search for a location or missionary">
			<ul class="suggestions"></ul></div>
  <div class="wrap760" style="text-align: right;">
    <div class="filters-toggle">Filters <span class="arrow">▼</span></div>
  </div>
  <div class="filters show">
    <div class="wrap760 duration-select">
      
      <label class="radio-label" for="any-duration">
        <input type="radio" name="duration" id="any-duration" checked="checked" value="any-duration">
        <div class="radio"></div>Any duration
      </label>
      
      <label class="radio-label" for="long-term">
        <input type="radio" name="duration" id="long-term" value="long-term">
        <div class="radio"></div>Long term
      </label>
      
      <label class="radio-label" for="short-term">
        <input type="radio" name="duration" id="short-term" value="short-term">
        <div class="radio"></div>Short term
      </label>
    </div>
    <hr>
    <ul class="regions">
      <div class="back">◀ Back </div>

      <li class="region">
        <div class="locations" amount="13"></div>
        <div class="region-button" data-location="northamerica" data-location-tooltip="North America">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" width="128px" height="128px" viewBox="0 0 128 128">
            <path d="M57.6,30.7c0-0.3-0.1-0.7-0.1-1c0.7-0.5,1.4-1.3,2.1-1.3c3.1,0.1,6.1,0.4,9.2,0.7c0,0.5,0,1.1-0.1,1.6 C65,30.7,61.3,30.7,57.6,30.7z M95.6,30.2c-4.9-0.4-8.9-0.8-12.7-1.1C83.3,31.6,89.2,32.9,95.6,30.2z M80.9,20.8 c1.5,4,4.6,2.9,7.6,2.2c-0.5,1.5-1.1,2.9-1.6,4.5c4.5,0.9,8.9,1.1,12.1-3.4c0.8-1.1,1.2-2.5,2.2-3.1c3.8-2.3,7.7-4.3,12.4-6.8 c-10.3-2.9-19.3-1.4-28.6,2.7c1.7,0.8,3.5,1.5,4.8,2.1c-0.2,0.7-0.4,1.4-0.7,2.1c-1.9-0.9-3.7-2-5.7-2.8c-0.8-0.3-1.8,0-2.8,0.1 C80.7,19.1,80.6,20,80.9,20.8z M55.2,35.2c1.7,2,3,3.6,4.2,5.1c0,0-0.5,0.3-1,0.6c0.1,0.4,0.1,0.8,0.2,1.1c4.6,0,9.2,0,14,0 c-1.4-3.1-2.6-5.6-3.7-8c-4.6,2.5-5,2.5-10.9-0.7c-4-2.2-6.6-1.3-8.7,3C52.8,40.7,54,35.6,55.2,35.2z M108.5,71.2 c1.3,2,2.6,4,4.1,6.2c-0.2,0.1-0.8,0.9-1.3,0.8c-7.2-0.5-9.7,4.8-12.4,10c-0.3,0.7-0.4,1.7-0.9,1.9c-4.5,2-5.3,5.3-2.9,10.1 c-2.4-2.1-3.9-4.3-5.8-4.8c-2.3-0.7-5.1-0.4-7.4,0.4c-1.8,0.6-3.8,2.4-4.4,4.1c-1.1,2.9-0.6,6.3,2.6,7.9c1,0.5,3-0.4,4.4-1 c0.9-0.4,1.6-1.4,3.2-1.5c-0.3,1.7-0.7,3.3-1,5.3c1.5,0.2,3,0.4,4.6,0.6c0,1.8,0,3.5,0,4.2c-4.3-1.6-8.9-3.3-13.4-5.1 c-3.3-1.3-6.8-1.9-8.5-6.4c-1.4-3.7-5.1-6.6-7.9-9.7c-0.1-0.1-1.1,0.7-1.7,1c-5.6-6.2-12.4-12.4-8-21.4c-1.8-1.9-3.5-3.2-4.6-4.9 C42.6,61.8,36.3,57.4,28,56.1c-1.1-0.2-2.5,1.1-4.1,1.9c-0.2-0.6-0.5-1.3-1-2.4c-1.3,1.9-2.4,3.4-3.6,5.1c-3.4-2.2-8.7-1.1-10.3-6.3 c1.7-1,3.2-1.9,5.8-3.5c-3.1-0.5-4.9-0.8-6.7-1.1c0-0.4-0.1-0.9-0.1-1.3c1.5-0.3,2.9-0.7,4.3-1c-1.2-0.9-2.5-2-3.4-2.8 c4.7-6,9.9-6,15.6-4.4c3.9,1.1,7.9,1.7,11.9,2.3c1,0.2,2-0.1,3-0.4c7.2-2.1,13.9-1.4,20.5,2.1c1.6,0.8,3.8,0.7,5.7,0.7 c4.2-0.1,8.3-0.9,12.5-0.8c3.2,0.1,3.3-0.7,1.9-3.1c-0.5-0.9-0.5-2,0.2-3.3c2.5,2.5,5,5,7.8,7.9c0.9-1.5,1.7-2.8,3.3-5.3 c-0.7,0-1.5-0.1-2.2-0.3c-1.4-0.4-2.9-1.8-3.5-3.1c-0.3-0.7,1.1-2.3,2.4-4.5c0.3,2.3,0.5,3.1,0.5,3.1c2.9-0.7,5.6-1.4,8.3-2.1 c0.2,0.4,0.3,0.8,0.5,1.2c-0.9,0.2-1.8,0.5-2.6,0.7c8.9-0.8,12.6,7.1,19.2,12c-2.3,0-3.9,0-6.1,0c0.9,1.3,1.8,2.5,3.2,4.7 c-2.5,0-4.7,0.4-6.6-0.1c-2.1-0.5-4-1.8-5.3-2.4c1-1.3,2.4-3.1,3.7-4.8c-2.4-1.4-4.7-3.1-7.3-4c-1.2-0.4-2.6-0.3-4-0.4 c0.9,2.2,1.6,3.7,1.9,4.4c-4.3,3.4-8,6.2-11.4,9.3c-2.9,2.6-1.6,5.9,1.1,7.1c4.8,2.1,9.9,3.2,12.1,9.1c0.5-0.2,1-0.4,1.5-0.6 c0.5-5.3,1-10.6,1.6-16c4.6-1,7,2.5,9.5,6.2c1.3-0.8,2.3-1.6,3.2-2.1c2.8,3.4,5.7,6.7,9.2,10.9C116,69.5,112.3,70.3,108.5,71.2z  M89.2,73.3c-1.8,0.3-3.6,0.6-5.4,1c0.1,0.4,0.1,0.9,0.2,1.3c1.2,0,2.4,0,3.8,0c-0.1,2.3-0.3,4-0.4,5.7c0.6,0,1.2,0,1.8,0 C89.2,78.6,89.2,76,89.2,73.3z"/>
          </svg>
        </div>
      </li>

      <li class="region">
        <div class="locations" amount="14"></div>
        <div class="region-button" data-location="southamerica" data-location-tooltip="South America">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" width="128px" height="128px" viewBox="0 0 128 128">
            <path d="M100.4,37.3c-4.7,4.4-5.4,10.2-6.9,15.9c-1,3.7-2.5,6.6-7.2,7.7c-3.7,0.9-6.7,3.1-7.7,8.3 c-0.8,4.4-4.8,8.3-8,11.9c-1,1.1-4,0.4-6.1,0.6c1.9,6.2,1.9,6.1-5,7.9c-0.8,0.2-1.6,0.7-2.2,1.3c-1.3,1.2-2.4,2.6-3.2,4 c-1.3,2.5-2.9,4.8-3.8,7.4c-0.5,1.5-0.1,3.3-0.1,4.9c0.4,0.1,0.9,0.1,1.3,0.2c-0.9,1.1-1.7,2.1-2.6,3.2c-3.3,4.2-3.1,6.4,0.4,10.7 c0.5,0.6,0.2,2,0.3,3c-1.3,0-2.5,0-3.8,0c-0.6-0.7-1-1.6-1.7-2c-1.8-1.2-5-2-5.3-3.5c-1-4.4-1.4-9-1.2-13.5c0.1-2.5,2.3-4.8,2.7-7.3 c0.3-2-1.2-4.2-0.9-6.2c1.1-7.4,2.5-14.7,3.9-22.1c0.3-1.9,0.6-3.7,1-5.6c1.5-7.2,0.8-12.9-7.4-16c-2.5-1-3.6-5.5-5.3-8.5 c-0.7-1.2-1.2-2.6-2-3.8c-3.8-5.6-3.6-10.3,0.5-15.9c1-1.4,2.2-3.2,2.2-4.8c0.2-7.1,1.9-9.5,9.1-11.5c0.1,1.3,0.1,2.6,0.2,3.8 c1.4-2.6,2.6-4.3,5.9-2.4C49.4,6,52,5.3,54,5.9c2.7,0.9,5.1,2.5,7.6,3.8c2.9,1.4,5.7,3,8.7,4c5.2,1.6,7.1,5.2,4.3,9.9 c1.5,1.6,2.7,4.1,5.3,0.9c0.4-0.4,1.5-0.6,2.1-0.4c6.1,2.4,12.2,4.6,18.1,7.5C101.1,32,101.3,36.4,100.4,37.3z"/>
          </svg>
          </div>
      </li>

      <li class="region">
        <div class="locations" amount="18"></div>
        <div class="region-button" data-location="europe" data-location-tooltip="Europe">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" width="128px" height="128px" viewBox="0 0 128 128">
            <path d="M70,34.6c4.4-0.9,5-4.6,7.1-7.3c3.7-4.7,7.8-9.3,12.2-13.4c1.4-1.3,4.3-1.1,6.7-1.6c-0.1,7.2,3,13.2,6.6,19 c0.4,0.7,0.2,2.6-0.4,3.1c-2.9,2.3-5.9,4.4-9,6.2c-0.7,0.4-3-0.6-3.2-1.3c-0.5-2-0.8-4.3-0.1-6.1c0.8-2.3,2.7-4.3,4.2-6.5 c-2.8-3-4.2-0.9-5.4,0.8c-1.5,2.1-2.6,4.3-3.9,6.5c-1.5,2.4-4.2,4.8-0.2,7.5c0.3,0.2,0.4,1.5,0.1,2c-2.3,3.8-4.8,7.6-7.6,12 c-1.9-4.4-3.3-7.8-4.8-11.1c-2.1,1.1-4.6,2.3-7.4,3.7c-0.2-3-0.4-5-0.5-7C64.2,37.2,66.9,35.2,70,34.6z M48.4,44.8 c-0.7,1.1-1,1.7-1.5,2.5c0.9,0.3,1.8,0.5,2.8,0.8c-0.9,1-1.7,2-2.5,2.9c1.1,3.6,2.1,7.1,3.3,11.1c0,0,0.7,0.3,2.3,0.9 c-2.4,1.7-4.1,3.6-6.2,4.2c-2.4,0.7-5.2,0.2-8-0.6c1.1-0.5,2.2-0.9,3.7-1.5c-1.1-0.7-2.1-1.2-3.2-1.8c1.6-1.4,3.5-2.7,4.8-4.4 c0.7-0.9,0.9-3,0.4-3.9C40.8,49.4,41.4,47.3,48.4,44.8z M32.4,21.9c0.3-0.9,0.7-1.8,0.9-2.3c2.8,0.5,5.1,0.8,7.4,1.4 c0.9,0.2,2.2,1,2.3,1.7c0.1,0.7-0.8,2.1-1.5,2.4c-1.7,0.7-3.5,1.1-5.3,1.4C33,26.9,31.5,25,32.4,21.9z M36.8,53.5 c0.7-0.2,1.7-0.2,2.3,0.2c0.5,0.3,0.9,1.4,0.8,2c-1.1,4.9-5.2,7-11.1,5.2C31.4,58,33.2,54.8,36.8,53.5z M77.4,115.7 c-2.7-1.1-5-2.1-7.2-3c0.1-0.5,0.1-1,0.2-1.4c2.3-0.2,4.5-0.4,7.1-0.6C77.4,112.2,77.4,113.6,77.4,115.7z M118.5,75.1 c-1.5,1-3.8,1.6-4.3,2.9c-1.3,3.5-2.2,7.3-2.5,11c-0.1,1.6,1.4,3.3,2.6,5.6c-2,0.5-4.6,1.1-7.2,1.9c-1.3,0.4-2.4,1.3-3.7,1.9 c-1.3,0.6-2.7,1-5.1,1.9c0.9,1.9,2.2,4.6,3.4,7.3c-0.4,1.2-1,2.8-1.9,5.5c-1.5-1.3-3.1-2.6-5.5-4.5c2.6-0.4,4.2-0.7,5.7-0.9 c-6.1-1-9.4-4.4-10.2-10.5c-0.1-0.9-1.1-1.9-1.9-2.5c-4-3-8.6-5.4-12.1-8.9c-1.8-1.7-2.9-2-3.9-0.4c-0.7,1.1-0.8,3.7,0,4.6 c3.3,4,7.1,7.6,10.6,11.2c-0.1,1.6-0.2,3.7-0.2,5.1c-3.6-2.8-7.5-5.7-11.2-8.8c-2-1.7-3.8-3.8-5-6c-2-3.5-4.6-2.9-6.7-1 c-2.8,2.5-5.5,2.7-8.9,1.5c-0.8-0.3-3.3,1.2-3.3,1.6c0.3,2.7-1.6,2.9-3.3,3.7c-4.4,1.9-9.3,3.1-9.6,9.5c-0.1,2.3-6.8,5.1-10.3,4.8 c-1.1-0.1-2.4-0.5-3.4-0.1c-2.7,0.9-4.4,0.3-6.2-2c-1.1-1.5-3.3-2.1-5-3.1c-0.8-6.6,5.2-10,7.6-15.3c2.7-5.8,6.4-4.4,10.6-3 c3.6,1.2,7.5,4,10.5-1.2c2.8-4.9,2-8.9-3-13.1c0.6-0.4,1.4-1.1,1.6-1c3.7,1.9,6.7-0.9,9.5-1.9c4.9-1.8,9.3-5.3,13.9-8.1 c1.1-0.7,2.3-1.7,3.5-1.7c2.7-0.1,3.7-0.7,3.2-3.8c-0.3-2.2,0.8-4.7,1.2-7c0.6,0.1,1.2,0.2,1.8,0.3c-0.3,1.4-0.3,2.9-1,4.1 c-1.6,2.6,0.1,4.1,2,4.4c2.4,0.4,5.8,0.8,7.2,0.1c3.8-1.9,7.6-1.8,11.5-2.1c0.8,0,1.6-0.6,2.4-1c-0.4-0.8-0.9-1.5-1-2.3 C90.9,51.9,90.6,50,90,47c2.6,1.1,3.8,1.6,6,2.5c-0.7-2.7-1.1-4.5-1.8-6.9c1.3-0.4,3-0.8,4.6-1.3c-0.2,0.4-0.5,0.8-0.7,1.1 c2.7,3.6,5.3,7.4,8.3,10.8c1.3,1.5,2.5,5.5,2.8,7.5c0.3,1.9,1.8,4,3.4,5.1c1.5,0.9,3.8,0.5,5.8,0.7 C118.5,69.3,118.5,72.2,118.5,75.1z"/>
          </svg>
        </div>
      </li>

      <li class="region">
        <div class="locations" amount="12"></div>
        <div class="region-button" data-location="africa" data-location-tooltip="Africa">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" width="128px" height="128px" viewBox="0 0 128 128">
            <path d="M104.4,101.2c-1.1,2-4,1.3-4.1-1c-0.1-3.4,0.5-6.8,1-10.1c0.1-0.4,0.8-0.7,1.2-1c1.8-1.4,3.7-2.8,6.1-4.7 C109.3,90.7,107.1,96.1,104.4,101.2z M100.4,65.4c-5,3.2-7.3,8.4-6.2,12.7c0.6,2.4,0.9,5,1.4,7.5c0.5,2.4-0.6,3.8-2.7,4.8 c-3.2,1.6-6.7,3.1-4.1,7.9c0.3,0.5,0.1,1.7-0.2,1.9c-4.7,2.9-4.6,9-8.4,12.3c-1.7,1.4-3.8,2.7-6,3.1c-4.4,1-8.5,2-9.9-5 c-1.4-6.5-5.2-12.4-7.6-18.7c-0.5-1.4-0.1-3.6,0.6-5c2.3-4.5,1.7-11.2-1.9-15c-2-2.1-3.1-3.8-1.8-6.9c1-2.4,0.3-4.6-3.1-4.8 c-1.1-0.1-2.1-1-3.2-1.3c-1.5-0.5-3-1.1-4.5-1c-3.3,0.3-6.7,0.6-9.8,1.7c-3.3,1.2-5.7,0-7.8-2.1c-2.6-2.6-4.9-5.5-7.3-8.2 c-0.2-0.3-0.4-0.8-0.4-1.1c0-4.1-0.7-8.4,0.4-12.2c1.1-3.8,2.5-8.2,7.2-9.9c1-0.4,1.9-2,2.3-3.2c1.5-5.1,3.7-6.9,9.2-7.2 c0.5,0,1-0.3,1.6-0.4c3.9-0.9,7.9-1.8,11.8-2.7c1-0.2,2-0.6,3-0.8c0.5,0,1.1,0,1.6,0c0.2,1,0.8,2.1,0.6,3.1c-0.5,2.9,0.7,4,3.4,4.3 c1.3,0.1,2.5,1,3.6,1.7c2.2,1.4,4.3,3.7,5.9-0.7c0.2-0.5,1.9-0.8,2.9-0.7c4.4,0.6,8.7,1.4,13,2.2c1.3,0.2,2.6,0.5,3.6,1.3 c0.4,0.3-0.2,1.9-0.5,2.9c-0.1,0.2-0.8,0.2-1.4,0.4c2.8,6,5.3,12,8.5,17.6c1.6,2.9,4.1,5.3,6.5,7.6c0.6,0.5,2.2,0,3.4-0.1 c2-0.3,4-0.6,6.6-1.1C108.7,56.8,105.9,61.9,100.4,65.4z"/>
          </svg>
        </div>
      </li>

      <li class="region">
        <div class="locations" amount="5"></div>
        <div class="region-button" data-location="asia" data-location-tooltip="Asia">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" width="128px" height="128px" viewBox="0 0 128 128">
            <path class="st0" d="M70.8,98c-1-0.5-2-1-3-1.5c1.4-1.7,2.8-3.4,4.3-5.1c0.5,0.3,1,0.6,1.6,0.9C72.7,94.2,71.8,96.1,70.8,98z M93.5,101.9c-2.7-0.9-5.3-1.8-8-2.6c0.2-0.7,0.5-1.4,0.7-2.2c2.7,0.9,5.3,1.8,8,2.7C94,100.5,93.7,101.2,93.5,101.9z M120.8,41.3c-2.5-1.5-3.4-0.8-4.8,1.8c-1,1.9-4.1,3.6-6.3,3.6c-3.2,0-4.5,1.1-5.4,3.8c-0.4,1.3-1.7,2.4-2.6,3.6c-0.5-0.3-1-0.6-1.5-0.8c1.2-2.3,2.3-4.7,3.5-7c-3.6-1.7-14.5,1.9-17.4,6c4,2.8,3.1,8.5-1.7,10.9c-4.2,2.1-4.2,2.1-4.1,6.6c-1.9-2.3-3-6-7-3c0.3,1,0.7,1.9,0.9,2.8c1.6,6.6,0.2,9.1-6.4,10.6c-3,0.7-4.5,1.2-2.2,4.4c0.7,1,0,2.9-0.1,4.4c-0.6,0.2-1.1,0.3-1.7,0.5c-2.9-2.8-5.6-5.8-8.7-8.3c-0.9-0.8-3.4-0.9-4.2-0.3c-2.5,2.3-4.5,5.1-6.6,7.5c-2.1-3-3.9-7.6-7.2-9.9c-3.5-2.4-8.5-2.6-12.9-3.9c-1.7,5.8,6.2,2,7.2,6.6c-3.3,1.9-6.6,3.8-10.6,6.1c-1.6-6.9-8.8-10.7-5.8-18.1c-2.3-0.5-4.4-1-6.5-1.5c0-0.7,0-1.3,0.1-2c3.3-0.4,6.6-0.8,10.4-1.3c-2.2-1-1.1-4.8-5.6-3.7c-2.1,0.5-7.4-0.7-6.9-6c0.1-1-1.1-2.1-2-3.8c5.4-3.1,9.1-7.5,5.3-15.7c3.9,1.6,6.3,2.5,9.8,3.9c-2.6,0.7-4,1-5.4,1.4c0.1,0.5,0.2,0.9,0.3,1.4c1.8-0.5,3.5-1.1,5.3-1.6c4.9-1.4,9.8-2.8,14.7-4c0.7-0.2,1.7,0.6,2.6,0.9c0.5-1.8,1-3.6,1.5-5.4c0.4,0.1,0.9,0.2,1.3,0.3c0.4,1.6,0.9,3.2,1.3,4.7c0.2,0,0.4,0,0.6,0c0.1-1.2,0.3-2.4,0.4-3.3c8.6-3.2,16.5-9.6,26.6-6.8c0.1,4,2.3,5.4,7.4,4.5c2.1-0.4,3.5-1.1,4.9,1.6c0.6,1.1,4.9,1.8,6.1,0.9c5.2-4.1,9.5,0.6,14.1,0.8c2.7,0.1,5.3,1.3,8,1.8c4.6,0.8,9.1,1.5,13.7,2.2c0,0.7,0,1.4,0,2.1C122.4,40.9,121.3,41.6,120.8,41.3z"/>
          </svg>
        </div>
      </li>

      <li class="region">
        <div class="locations" amount="4"></div>
        <div class="region-button" data-location="oceania" data-location-tooltip="Oceania">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" width="128px" height="128px" viewBox="0 0 128 128">
            <path class="st0" d="M95.7,102.6c-0.5,0.6-2.1,1.2-2.2,1c-1.6-2.1-3.1-4.2-5.1-7.1c3.6,0,5.8,0,8.4,0 C98.3,98.8,97.1,100.8,95.7,102.6z M105.6,76.1c-1.8,2.5-2.5,5.8-4,8.5c-0.8,1.5-2.1,2.7-3.4,3.8c-1,0.8-2.6,0.8-3.4,1.6 c-1.3,1.4-2.3,1.1-3.6,0.3c-0.7-0.4-1.8-0.7-2.5-0.4c-4.8,1.8-8.3,0.1-10.1-4.5c-0.7-1.9-2.3-3.4-3.7-5.3c-0.6,0.5-1.3,1-2.1,1.7 c0.5-1.9,1-3.6,1.6-5.4c-0.2-0.1-0.4-0.2-0.6-0.3c-1.3,1.6-2.7,3.1-4.3,4.9c-0.8-1.1-1.4-1.9-1.9-2.7c-3.4-5.7-8.5-7.3-14.5-4.7 c-1.7,0.7-3.7,0.7-5.4,1.4c-1.8,0.6-3.4,1.6-5.2,2.4c-1.2,0.5-2.5,0.9-3.8,1.2c-2.4,0.6-5,1-7.3,1.9c-3.3,1.3-5.2,1.1-8.2-1.7 c2-3.7-0.4-14.6-3.9-17.8c0-0.5,0-0.9,0-1.4c0.4-0.3,1.1-0.5,1.2-0.8c0.1-0.5-0.2-1.1-0.4-1.7c-1.2-5.6,1.7-9.8,7.4-10.8 c2.1-0.4,4.2-0.8,6.1-1.4c4.4-1.5,5.1-2.3,6.5-6.1c1.4-1.2,2.9-2.5,4.3-3.7c1.3-1.1,2.4-2.5,3.8-3.4c0.6-0.4,1.9-0.1,2.8,0.2 c1.2,0.5,2.2,1.4,3.5,2.1c2.4-6.6,5.2-8.1,11.9-7.1c1.6,0.3,3.2,0,5.1,0c-3.5,5.4-3.5,7.3,3.2,10.1c0.9,0.4,1.8,0.7,2.5,1.2 c3,2.1,4.4,1.6,5.2-2c0.5-2.4,0.5-4.9,0.8-7.3c0.2-1.5,0.6-3,0.9-4.5c0.3,0,0.6,0,1-0.1c0.6,1.7,1,3.4,1.8,5.1 c0.5,1,1.4,1.9,2.1,2.8c0.7,1,1.7,1.8,2.1,2.9c1.3,4.1,2,8.5,6.8,10.3c0.6,0.2,1.1,0.9,1.5,1.4c2.4,3,5.1,5.8,6.9,9 c1.5,2.6,2.8,5.8,2.8,8.8C109,68.6,108.1,72.6,105.6,76.1z"/>
          </svg>
        </div>
      </li>

    </ul>
  </div>
  <div class="missionary-content"><br><br><br><br><br></div>
</div>

missionary-search.markdown

missionary search

A Pen by Carl Tanner on CodePen.

License.

script.js

/*
* Searching library for WOL International ministries
*
* Depends: 
* - jQuery.js https://github.com/jquery/jquery
* - fuse.js https://github.com/krisk/Fuse
* - anime.js https://github.com/juliangarnier/anime
*/

(function (root, factory) {
	if ( typeof define === 'function' && define.amd ) {
		define(factory);
	} else if ( typeof exports === 'object' ) {
		module.exports = factory;
	} else {
root.missionsSearch = factory(root); // @todo Update to plugin name
}
})(this, function (root) {

	'use strict';

	var fuse;

	var selectedItem = null;
	var selectedItemVisible = false;

	var missionsSearch = function(element, searchData, indexedData, options){

		var missionsSearch = {};
    
		var options = {
			fuseOptions : options.fuseOptions || {},
			searchResults: options.searchResults || 5,
			showResults: typeof options.showResults !== 'undefined' ? options.showResults : true,
			showItemByIDCallback: options.showItemByIDCallback || function(){},
			clearCallback: options.clearCallback || function(){},
			mobileCallback: options.mobileCallback || function(){},
			changeCallback: options.changeCallback || function(){}
		}
   
		/**
		 * Initialize the missionary search 
		 * @private
		 */
		var init = function(){	

			if ( typeof Fuse !== 'function' ){
				console.error( 'MissionsSearch: Fuse.js is defined, please download it from https://github.com/krisk/Fuse.' );
				return;
			}

			if ( typeof jQuery !== 'function' ){
				console.error( 'MissionsSearch: jQuery.js is defined, please download it from https://github.com/jquery/jquery.' );
				return;
			}

			if ( typeof anime !== 'function' ){
				console.error( 'MissionsSearch: anime.js is defined, please download it from https://github.com/juliangarnier/anime.' );
				return;
			}

			// convert to a jQuery object if not a jQuery object
			element = element instanceof jQuery ? element : $(element);

			searchData = typeof searchData == 'string' ? (isValidJSONString(searchData) ? JSON.parse(searchData) : null ) :
			typeof searchData == 'object' ? searchData : null;

			indexedData = typeof indexedData == 'string' ? (isValidJSONString(indexedData) ? JSON.parse(indexedData) : null ) :
			typeof indexedData == 'object' ? indexedData : null;

			// Error if provided search and indexed data is not valid JSON
			if ( searchData == null || typeof searchData === 'undefined' || indexedData == null || typeof indexedData === 'undefined' ){
				console.error( 'MissionsSearch: Not a valid object provided for searching. Object initializion canceled.' );
				return;
			}



			fuse = new Fuse(searchData, options.fuseOptions);

			if ( isMobile() ) { 
				element.addClass('mobile');
				options.mobileCallback();
			}
      
      $(element).addClass('map-search');

			// add our required HTML to element
			$(element).html(`<span class="map-search-icon map-search-icon-search"></span>
			<span class="map-search-icon map-search-icon-loading"></span>
			<span class="map-search-icon map-search-icon-close"></span>
			<input type="text" name="map-search" placeholder="Search for a location or missionary">
			<ul class="suggestions"></ul>`);

			  element.children('[name=map-search]').on('keyup', handleInputKeyupEvent );
  			element.children('.map-search-icon-close').on('click', missionsSearch.clear );
  			element.on('click', '.suggestions li', suggestionClickHandler );
  			element.on('click', '.region-location-button', suggestionClickHandler );

  			element.removeClass('hidden');
  			
		}

		/**
		 * Update the results with the query inside the input lement
		 * @public
		 */
		missionsSearch.update = function() {

			var results = missionsSearch.query( element.children('input[name=map-search]').val(), options.searchResults );
      
      options.changeCallback( results );

      if ( options.showResults ){
  			populateFromQueryResults( results )

        if ( results.length == 0 && element.children('input[name=map-search]').val().length > 0){
          element.children('.suggestions').prepend('<li class="no-results">No results found</li>')
        }

        missionsSearch.updateStyle(results);
        
      }

		};
    
    missionsSearch.fuse = function(){
      return fuse;
    }

		/**
		 * Update the results with the query inside the input lement
		 * @public
		 */
		missionsSearch.updateStyle = function(results) {

			if ( element.children('input[name=map-search]').val().length == 0 ){
				element.children('.big').removeClass('under');
				if ( selectedItem == null ){
					element.removeClass('show-results');
				}
			} else {
				element.addClass('show-results');
			}

			if ( selectedItemVisible && selectedItem != null ){
				element.addClass('big-visible')
			} else {
				element.removeClass('big-visible')
			}

			if ( selectedItem == null ){
				element.children('.big').remove();
			}
		};

		/**
		 * Update the results with the query inside the input lement
		 * @private
		 */
		var populateFromQueryResults = function(queryResults) {
			var results = queryResults

			var suggestions = element.children('.suggestions');

			suggestions.html('');
			results.forEach( function(result, index){

				suggestions.append(`
				<li data-id='${result.item.id}' class="${result.type} ${ index == 0 ? 'active' : '' }">
					<div class="title">${result.item.n}</div>
					<div class="sub" >${result.type}</div>
				</li>`)
			});
		};

		/**
		 * Query the search data and output a specific amount of results (default:5) prioritized by Region, then Location, then Field, then Missionary.
		 * @public
		 * @param {string}	 	searchQuery	The query to search for
		 * @param {intiger} 	amount of results to return
		 * @returns {array} 	results from the search query
		 */
		missionsSearch.query = function(searchQuery, outputResults = 5) {
			var results = fuse.search(searchQuery);

			// fields are not currently being populated, this is for future when we will have a clearer split in coutries with multiple locations
			var regions = [];
			var locations = [];
			var fields = [];
			var missionaries = [];

			results.forEach( function(i){
				if ( ['Career', 'CCI', 'Launch', 'Short Term', 'Undefined'].indexOf(i.item.t) !== -1 ) { 
					i.type = 'missionary';
					missionaries.push(i);
				}
				else if ( ['location'].indexOf(i.item.t) !== -1 && typeof i.item.cf !== 'undefined' ) { 
					i.type = 'region';
					regions.push(i);
				}
				else { 			
					i.type = 'location';
					locations.push(i);
				};
			})

			// connect all the results by priority
			// var output = [].concat(regions).concat(locations).concat(fields).concat(missionaries);
			var output = missionaries;


			// Cut the array in double size of the output to decrease processing time
			output = output.slice(0, outputResults*2);

			// Remove duplicate ids
			output = output.filter((item, index, self) =>
			  index === output.findIndex( t => ( t.item.id === item.item.id ))
			)

			return output.slice(0, outputResults);
		};

		/**
		 * Keyboard input handler with the ability to prevent results search update from being called
		 * @private
		 * @return {boolean} returns true if update should be triggered false if it should not be triggered.
		 */
		var handleInputKeyupEvent = function(e){
		switch (e.keyCode){
			case 38: // Up arrow
				if ( element.children('.suggestions').children('.active').prev('li:not(.big)').length > 0){
					element.children('.suggestions').children('.active').removeClass('active').prev().addClass('active')
				} else {
					element.children('.suggestions').children('.active').removeClass('active')
					element.children('.suggestions').children('li:not(.big):last').addClass('active');
				}
				break;
			case 40: // Down arrow
				if ( element.children('.suggestions').children('.active').next('li:not(.big)').length > 0){
					element.children('.suggestions').children('.active').removeClass('active').next().addClass('active')
				} else {
					element.children('.active').removeClass('active');
					element.children('.suggestions').children('li:not(.big):first').addClass('active');
				}
				break;
			case 13: // Enter Click
				missionsSearch.showItemByID( element.children('.suggestions').children('.active').attr('data-id') );
				break;
			case 27: // Escape Click
				missionsSearch.clear()
				break;
			default:
				if ( element.children('[name=map-search]').val() != '' ){
					element.children('.big').addClass('under');
				}
				break;
			}

			// Prevent update function to be called on these keys (Ctrl,Alt,Shift,CapsLock,Esc,Arrowkeys,etc.)
			var updateSuggestions =  ([220, 13, 16, 39, 38, 37, 40, 18, 93, 91, 17, 9, 27].indexOf(e.keyCode) == -1);

			if ( updateSuggestions ){
				missionsSearch.update()
			}
		}

		var suggestionClickHandler = function(e){

			missionsSearch.showItemByID( $(e.currentTarget).attr('data-id') );
		}

		/**
		 * Expand a item from the search results, or a completely new item
		 * @public
		 * @param {number|string} ID of the location or the missionary to show
		 */
		missionsSearch.showItemByID = function(id){
			var id = String(id);
			var index = getIndexOfSuggestionByID(id);
			var offset = getOffsetFromTopByIndex(id);

			var data = indexedData[id];

			if ( index == false ){
				element.children('.suggestions').children('li').remove();
			}


// 			var bbox = data.t == 'field' ? JSON.parse(indexedData[data.pf].bbox) : 
// 					   data.t == 'location' ? JSON.parse(data.bbox) :
// 					   typeof data.bbox !== 'undefined' ? JSON.parse(data.bbox) : 
// 					   typeof indexedData[data.lid] !== 'undefined' ? JSON.parse(indexedData[data.lid].bbox) : null;

// 			options.showItemByIDCallback(id, bbox, indexedData);
      
      options.showItemByIDCallback(id, indexedData);
			
			$('[name=map-search]').val(data.n);

			if ( selectedItem != null ){ selectedItem.remove() }
			selectedItem = element.children('.suggestions').children('li').eq(index).clone();

			if ( selectedItem.attr('data-id') != id || selectedItem.length == 0) {

				if ( ['Career', 'CCI', 'Launch', 'Short Term', 'Undefined'].indexOf(data.t) !== -1 ) { 
					data.type = 'missionary';
				}
				else if ( ['location'].indexOf(data.t) !== -1 && typeof data.cf !== 'undefined' ) { 
					data.type = 'region';
				}
				else { 			
					data.type = 'location';
				};

				selectedItem = $(`
					<li data-id='${id}' class="${data.type}">
						<div class="title">${data.n}</div>
						<div class="sub">${data.type}</div>
					</li>`);
			}


			selectedItem = $( `<div><div class="content">${ selectedItem[0].innerHTML }</div></div>` );

			data.type = ['Career', 'CCI', 'Launch', 'Short Term', 'Undefined'].indexOf(data.t) !== -1 ? 'missionary' : 'location';

			var pageURL = data.type == 'location' ? '/locations/'+data.s : '/missionaries/'+data.n.toLowerCase().replace(/ /g,'-')+'-'+data.id+'/';
			pageURL = "https://test.multindelible.com" + pageURL;
			var fundID = data.n + (( typeof data.fid !== 'undefined')  ? ( data.fid !== null ? ` (${data.fid})` : '' ) : '' );
			var cashAmount = '75';

			var showGiveButton = data.type == 'missionary';

			// Populate the item content (regions such as Brazil and Germany need to have subregions listed)
			if ( data.cf == undefined ){
				selectedItem.append(`
					<form method="post" action="https://give.wol.org/${fundID}" target="_parent">
						<input type="hidden" name="amt" value="${cashAmount}">
						<input type="hidden" name="picture" value="${data.s.toLowerCase()}">
						<div class="search-btn-container">
							<a class="search-visit-page" href="${pageURL}" target="_parent">Visit page</a>
							${ showGiveButton ? `<label for="map-give-submit" class="search-give">Give <input type="submit" style="display:none" id="map-give-submit"></label>` : ''}
						</div>
					</form>

					`)

				selectedItem.addClass('big')
							.addClass('pre-big')
							.addClass('hide-buttons')
							.addClass( data.type )
							.css({
								'position':'absolute',
								'top': (offset != false) ? offset+'px' : '42px',
							})
				if (offset == false) { selectedItem.css({'height': '0px'}); }


				// Append image of the missionary or location
				selectedItem.prepend(`
				<div class="header-image" style="width: 100%; height:0; background: url('https://home.wol.org/api/im/0.5/photo/${data.id}') no-repeat center center;
				background-size: cover;
				-webkit-background-size: cover;
				-moz-background-size: cover; 
				-o-background-size: cover;"></div>`);

				element.append(selectedItem);


				if ( ['Career', 'CCI', 'Launch', 'Short Term', 'Undefined'].indexOf(data.t) != -1 ){
					if ( typeof indexedData[data.lid] !== 'undefined' ){
						var missionaryType = ( data.t == 'Undefined') ? '' : data.t+' ';
						var missionaryLocation = ( typeof indexedData[data.lid].n == 'undefined' || indexedData[data.lid].n == 'undefined') ? '' : ' in '+indexedData[data.lid].n;
						$('.big .sub').html(missionaryType+$('.big .sub').html()+missionaryLocation)
					} else {
						// Revive members
					}
				}


				requestAnimationFrame(function(){

					element.children('.big').removeClass('pre-big');

					anime({
						targets: '.header-image',
						easing: 'easeOutCirc',
						duration: 500,
						delay: 500,
						height: '183px', //$('.suggestions').innerWidth()/1.5
					});

					anime({
						targets: element.children('.suggestions')[0],
						duration: 500,
						opacity: [1,0],
						complete: function(){
							element.children('.suggestions').children('li').remove();
							element.children('.suggestions').css('opacity',1);
						}
					});

					anime({
						targets: '.big',
						easing: 'easeOutCirc',
						duration: 500,
						top: 42,
						height: isMobile() ? 100 : 300,
						complete: function(){
							element.children('.big').removeClass('hide-buttons');
						}
					});
				})
			} else {
				// Germany or Brazil


				selectedItem = $(`
					<div data-id='${id}' class="region" style="height: 0px;">
						<div class="content">
							<div class="title">${data.n}</div>
							<div class="sub">Locations in Region </div>
						</div>
					</div>`);

				var childLocations = data.cf.split(',');
				childLocations.forEach( function(item, index){
					var childData = indexedData[item];

					var pageURL = 'https://test.multindelible.com/location/' + childData.s;

					selectedItem.children('.content').append(`
							<span data-id="${childData.id}" class="region-location-button" href="${pageURL}">${childData.n}</span><br>`);
							// <div class="title">${childData.n}</div>
							// <div class="search-btn-container" style="position: relative">
							// 	<a class="search-visit-page" href="${pageURL}">Visit page</a>
							// </div>`);
				})

				element.append(selectedItem);
				selectedItem.addClass('big')


				requestAnimationFrame(function(){

					element.children('.big').removeClass('pre-big');

					anime({
						targets: element.children('.suggestions')[0],
						duration: 500,
						opacity: [1,0],
						complete: function(){
							element.children('.suggestions').children('li').remove();
							element.children('.suggestions').css('opacity',1);
						}
					});

					anime({
						targets: '.big',
						easing: 'easeOutCirc',
						duration: 500,
						top: 42,
						height: 52+childLocations.length*21,
						complete: function(){
							element.children('.big').removeClass('hide-buttons');
						}
					});
				})


			}


			if ( $('.suggestions .big').length == 0 ){
			$('#map-search').removeClass('big-visible');
			} else {
			$('#map-search').addClass('big-visible');
			}

			var results = missionsSearch.query( id, 1 );
			missionsSearch.updateStyle(results);

		}

		/**
		 * Find the index of a suggestion by ID
		 * @private
		 * @param {number|string}	ID of the location or the missionary to show
		 * @return {number}			Returns the index of the item with provided ID in the suggestions, returns false if not found.
		 */
		var getIndexOfSuggestionByID = function(id){
			var itemIndex = false;

			//check if any of the current suggestions have the id
			element.children('.suggestions').children('li').each(function(i,j,k){
				if ( $(j).attr('data-id') == id){
					itemIndex = $(j).index('li:not(.big)');
				}
			})
			return itemIndex;
		}

		/**
		 * Return offset from top of suggestion with given index in px
		 * @private
		 * @param {number|string}	ID of the location or the missionary to show
		 * @return {number|boolean}	Returns the number of pixels the item is offset from top or false if item with index not found
		 */
		var getOffsetFromTopByIndex = function(id){
			var offsetTop = 42;
			var output = false;
			//check if any of the current suggestions have the id
			element.children('.suggestions').children('li').each(function(index,element){
				if ( $(element).attr('data-id') == id){
					output = offsetTop;
				} else {
					offsetTop += $(element).outerHeight();
				}
			})
			return output;
		}

		/**
		 * Clear all search results and input field
		 * @public
		 */
		missionsSearch.clear = function(){
			element.children('input[name=map-search]').val('')
			element.children('.suggestions').html('')
			element.removeClass('show-results')
			if ( typeof selectedItem != 'undefined' ){
				selectedItem.remove();
			}
			selectedItem = null;
			selectedItemVisible = false;
			missionsSearch.update;
			options.clearCallback();
		}

		/**
		 * Validate whether string has correct JSON format
		 * @private
		 * @return	{boolean}	True if JSON formatted string, otherwise false 
		 */
		var isValidJSONString = function(string) {
			try {
				JSON.parse(string);
			} catch (e) {
				return false;
			}
			return true;
		}


		/**
		 * Check whether device is mobile
		 * @private
		 * @return	{boolean}	True if device is mobile;
		 */
		var isMobile = function(){
			return ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && window.innerWidth < 600 );
		}

		init();

		missionsSearch.options = options;

		return missionsSearch;

	}

return missionsSearch;

});










$('.region').on('click', function(e){
  $('.regions').addClass('show-back');
  $('.region').addClass('hidden');
  $(e.currentTarget).removeClass('hidden').addClass('active');
  $('.back').html('◀ '+$(e.currentTarget).children('.region-button').attr('data-location-tooltip') )
})

$('.back').on('click', function(){
  
  $('.regions').removeClass('show-back');
  $('.hide-button').removeClass('hide-button');
  
  requestAnimationFrame( function(){
    $('.region').removeClass('hidden');
    $('.region').removeClass('active');
  })
})

$('.filters-toggle').on('click', function(e){
   $('.filters').toggleClass('show');
   if ( $('.filters').hasClass('show') ){
     $('.filters-toggle .arrow').addClass('rotate');
   } else {
     $('.filters-toggle .arrow').removeClass('rotate');
   }
})

$('body').on('click', '.location-row', function(e){
  var title = $(e.currentTarget).children('.location-title').html();
  var slug = $(e.currentTarget).children('.location-title').attr('data-location-slug')
  var flagURL = $(e.currentTarget).children('.flag').css('background-image');
  
  if ( $('.duration-select .location').length == 0 ) {
    $('.duration-select').prepend('<span class="location"></span>')
  }
  
  $('.duration-select .location').replaceWith(`<span class="location" data-location-slug="${slug}">
        <div class="flag" style='background-image: ${flagURL}'></div>
        <span class="location-title">${title}</span>
        <span class="remove">×</span>
      </span>`)
  
  $('.show-back .back').click();
  missionaryPageSearch.update()
})

$('body').on('click','.duration-select .remove', function(e){
  $('.duration-select .location').remove();
  missionaryPageSearch.update();
})

$('input').on('change', function(e){
  missionaryPageSearch.update();
})

$('body').on('click', '#more-missionaries', function(e){
  loadMoreMissionaries();
})


var currentResults;

options = {
	searchResults : -1,
  showResults: false,
	fuseOptions: {
		shouldSort: true,
		includeMatches: true,
		threshold: 0.5,
		location: 0,
		distance: 100,
		maxPatternLength: 32,
		minMatchCharLength: 2,
		keys: [
			{
				"name": "n",
			},
			{
				"name": "id",
      }
		]
	},
	mobileCallback: function(){},
	showItemByIDCallback: function(id, bbox, indexedData){},
	clearCallback: function(){},
  changeCallback: function(results){
    
    if ( results.length == 0 && $('#missionary-page-search [name=map-search]').val().length == 0 ){
      results = missionaryPageSearch.fuse().list;
      results = Object.assign([], results);
    }
    
    results = applyFilters(results);
    
    if ( results.length == 0 ){
      console.log('No results found for given filters');
      $('.missionary-content').html('No results found')
    }
    
    var content = '';
    for (var i = 0; i < Math.min(results.length, 20); i++ ){
      var item = (typeof results[i]['item'] !== 'undefined') ? results[i]['item'] : results[i];
      content += getMissionaryCard(item);
    }
    
    if ( content != '' ){
      $('.missionary-content').html(content)
    }
    
    currentResults = results;
    
    if ( results.length > 20 ){
      $('.missionary-content').append('<div id="load-more-container"><button id="more-missionaries">Load More</button></div>')
    }
    
  },
};

function loadMoreMissionaries(){
   var startIndex = $('.missionary-single-result').length;
   var endIndex = startIndex + 20;

    var content = '';
    for (var i = startIndex; i < Math.min(currentResults.length, endIndex); i++ ){
      var item = (typeof currentResults[i]['item'] !== 'undefined') ? currentResults[i]['item'] : currentResults[i];
      content += getMissionaryCard(item);
    }
  
   $('#load-more-container').before( content );
  
  
   if ( currentResults.length <= $('.missionary-single-result').length ){
      $('#load-more-container').remove();
    }
  
}

function getMissionaryCard(missionaryData){
  
  return `<div id="missionary-${missionaryData.id}" class="missionary-single-result BH long-term missionary-toggled" data-missionary="${missionaryData.id}" style="display: block;"><h3 class="missionary-name">${missionaryData.n}</h3>
							 <a class="missionary-link" href="/missionaries/${missionaryData.n.replace(' ','-').toLowerCase()+'-'+missionaryData.id}" style="outline: none;"><img src="https://home.wol.org/api/im/0.5/photo/${missionaryData.id}" class="missionary-image">
							<div class="archive-fund-status black-fade-in" style="display: ${missionaryData.displaysupport === 0 ? 'none' : 'block'}"><div class="support-levels flex">
										<span class="raised">${missionaryData.supportlevel}%</span>
										<span class="remaining">100%</span>
									</div>
								<div class="slider-container"><div class="slider-fill highlight-bg" style="width:${missionaryData.supportlevel}%;"></div></div></div></a>
							<div class="display-flex">
							<a target="_blank" href="https://give.wol.org/${missionaryData.fundid}?amt=50" class="margin-right-10 primary-bg wol-btn donate">Donate Now</a> <a href="/missionaries/${missionaryData.n.replace(' ','-').toLowerCase()+'-'+missionaryData.id}" class="margin-left-10 primary-bg wol-btn">Profile</a>
							</div>
						</div>`;
  
}
  
  
var	missionaryPageSearch;
var regionsArray = {};

// POPULATE REGIONS WITH APPROPRIATE COUTRIES AND FLAGS 

// LOAD LOCATIONS
loadJSON('https://home.wol.org/api/im/0.5/locations/', function(locations){
  // LOAD FIP -> REGION PAIRS
  loadJSON('https://test.multindelible.com/wp-content/plugins/wol-im-api/location-to-region.php', function(codes){
    
    locations = JSON.parse(locations);
    codes = JSON.parse(codes);
    
    // CREATE A regionsArray THAT CONTAINS AN ARRAY OF REGIONS, AND EACH REGION, AN ARRAY OF LOCATIONS
    locations.forEach(function(location, index){
      
      if ( location.fip !== null){
          locations[index].region = codes[location.fip.split(', ')[0]].replace(/\s+/g, '').toLowerCase();
          
          if ( typeof regionsArray[location.region] !== 'object' ){
            regionsArray[location.region] = [];
          }
          regionsArray[location.region].push( location );
        }
      
    })   
    
    // SORT COUNTRIES ALPHABETICALLY AND POPULATE THE REGIONS WITH NAMES AND COUNTRIES
    for (var key in regionsArray){
      if (regionsArray.hasOwnProperty(key)) {
        regionsArray[key].sort(function(a, b){
            if(a.CountryName < b.CountryName) return -1;
            if(a.CountryName > b.CountryName) return 1;
            return 0;
        })
        
      }
    }
    
  
    for (var key in regionsArray){
      if (regionsArray.hasOwnProperty(key)) {
        
        var locationList = '';
        regionsArray[key].forEach( function(location){
          
          location.fip = location.fip == 'NN'             ? 'SK' :
                         location.fip.indexOf(',') !== -1 ? 'DEFAULT' : location.fip;
          
          var url = 'https://www.cia.gov/library/publications/resources/the-world-factbook/graphics/flags/large/'+location.fip.toLowerCase()+'-lgflag.gif';
          
          url = location.fip == 'DEFAULT' ? 'https://test.multindelible.com/wp-content/plugins/wol-im-api/png/default-flag.png' : url;
          
          locationList += `
    <div class="location-row">
    <div class="flag" style="background-image: url('${url}')"></div>
    <span class="location-title" data-location-slug="${location.slug}">${location.CountryName}</span>
    </div>`
        })
        $(`[data-location=${key}]`).parent().find('.locations').html(locationList)
      }
    }
    
  })
})

loadJSON('https://home.wol.org/api/im/0.5/missionaries/',function(searchData){
  
  
	searchData = JSON.parse(searchData);
  
  var allMissionaries = [];
  
  for (var key in searchData){
    if (searchData.hasOwnProperty(key)) {
      allMissionaries = allMissionaries.concat(searchData[key]);
    }
  }

	window.searchData = searchData;
	window.data = {};
	allMissionaries.forEach( function(i){
		window.data[i.id] = Object.assign({}, i);
	})

	missionaryPageSearch = new missionsSearch( $('#missionary-page-search'), allMissionaries, window.data, options );
  missionaryPageSearch.update();

})

function loadJSON(url, callback) {	 

		var xobj = new XMLHttpRequest();
				xobj.overrideMimeType("application/json");
		xobj.open('GET', url, true);
		xobj.onreadystatechange = function () {
					if (xobj.readyState == 4 && xobj.status == "200") {
						callback(xobj.responseText);
					}
		};
		xobj.send(null);	
 }

function applyFilters( results ){
  
  var duration = $('[name=duration]:checked').val();
  var countrySlug = $('.duration-select .location').attr('data-location-slug') || null;
  
  
  var output = [];
  for (var i = 0; i < results.length; i++) {
    
    var item = (typeof results[i]['item'] !== 'undefined') ? results[i]['item'] : results[i];
        
    if ( countrySlug == null ){
      if ( duration == 'any-duration' ){
        output.push(item);
      } else if ( duration == 'long-term' && item.t == 'Career'){
        output.push(item);
      } else if ( duration == 'short-term' && item.t !== 'Career'){
        output.push(item);
      }
    } else if ( countrySlug == item.ls ){
      
      if ( duration == 'any-duration' ){
        output.push(item);
      } else if ( duration == 'long-term' && item.t == 'Career'){
        output.push(item);
      } else if ( duration == 'short-term' && item.t !== 'Career'){
        output.push(item);
      }
      
    }
    
  }
  
  return output;
  
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

style.css

.regions {
  width: 750px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  max-width: 95vw;
  list-style-type: none;
  padding: 0;
  position: relative;
}

.regions .region {
  height: 80px;
  flex: 1;
  margin: 10px;
  cursor: pointer;
  transition: flex-grow .4s ease, margin 0.3s ease, opacity .3s ease;
  position: relative;
/*   background: gray; */
}

.regions .back {
  position: absolute;
  left: 0;
  top: 0;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  color: #888;
  cursor: pointer;
  margin: 0.5vw 1vw;  
  opacity: 0;
  transition: opacity .3s ease;
}

.regions.show-back .back {
  opacity: 1;
  z-index: 1;
}

.regions .region .region-button {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0) scale(1);
  max-width: 100%;
  width: 100px;
  height: 100%;
  z-index: 1;
  transition: opacity .3s ease, transform .3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.regions .region.hidden {
  flex-grow: 0.00001;
  opacity: 0;
  margin: 10px 0;
}

.regions .region.hide-button .region-button {
  display: none;
}

.regions .region .region-button:after {
  content: attr(data-location-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  font-size: 14px;
  color: #aaa;
  transition: fill .3s ease;
}

.regions .region .region-button svg {
  width: 100%;
  height: 100%;
  fill: #ccc;
  transition: fill .3s ease;
}

.region:hover .region-button svg, .regions .region.active .region-button svg {
  fill: #34404E;
}

.regions .region.active .region-button {
  opacity: 0;
  transform: translate(-50%, -20px) scale(0);
}

.region:hover .region-button:after, .regions .region.active .region-button:after {
  color: #34404E;
}

.regions .region .locations {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  position: absolute;
  align-items: center;
  width: 100%;
  margin-top: 5px;
  background: #fff;
  padding: 20px;
}

.regions .region .locations .location-row {
  width: 33.33%;
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 0px;
  opacity: 0;
  transition: height .3s ease, opacity .3s ease;
  overflow: hidden;
}

.regions .region.active .locations .location-row {
  height: 30px;
  opacity: 0.8;
}

.regions .region .locations .location-row .title {
  white-space: no-wrap;
}

.regions .region .locations .location-row .flag, .duration-select .flag {
  position: relative; 
  top: 4px;
  width: 40px;
  height: 23px;
  display: inline-block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 5px;
}

.duration-select .flag {
  width: 30px;
  height: 18px;
  margin-right: 5px;
}

.duration-select .location {
  background: #999;
  color: #fff;
  padding: 5px;
  position: relative: -5px -5px;
  border-radius: 5px;
}

.duration-select .remove {
  cursor: pointer;
  padding: 4px 0 4px 4px;
}

.regions .region .locations .location-row:hover {
  opacity: 1;
}


.filters {
  transition: transform .3s ease, margin .3s ease;
  transform-origin: center top;
  transform: scale(0);
  margin-bottom: -100px;
}

.filters.show {
  transform: scale(1);
  margin-bottom: 40px;
}

#missionary-page-search {
  z-index: 10;
  position: relative;
  left: 0;
  top: 0;
  width: 760px;
  margin: 20px auto 5px;
}

.filters-toggle {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
	color: #666;
  cursor: pointer;
  user-select: none;
}

.filters-toggle .arrow {
  display: inline-block;
  transition: transform .3s ease;
  transform: rotate(0deg);
}

.filters-toggle .arrow.rotate {
    transform: rotate(180deg);
}

.filters hr {
  width: 600px;
  margin: 0 auto;
}

.wrap760 { 
  width: 760px;
  margin: 0 auto;
  text-align: center;
  max-width: 100vw;
}

.duration-select {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 10px;
}

.radio-label {
  cursor: pointer;
}

.radio-label .radio {
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.2);
  margin: 0 5px 0 20px;
  position: relative;
  top: 5px;
}

.radio-label input {
  display: none;
}

.radio-label input + .radio:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 50%;
  transition: transform .3s ease;
}

.radio-label input:checked + .radio:after {
  transform: translate(-50%, -50%) scale(1);

}

















/* Basics */
.map-search,
.map-search *,
.map-search *:after,
.map-search *:before {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.map-search {
	position: absolute;
	font:15px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
	background-color:white;
	width: 275px;
	z-index:1;
	border-radius:3px;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
	left: 20px;
	top: 20px;
	transform: translateX(0);
	transition: all .3s ease;
}

.map-search.center {
	width: 40%;
    left: 50%;
    transform: translateX(-50%);
    top: 10vh;
}

.map-search.mobile {
	width: 95vw;
	left: 2.5vw;
	top: 2.5vw;
	transform: none;
}

#top-search-input-mobile {
	position: relative;
	max-width: 45vw;
	left: 0;
	top: 0;
}

.map-search.show-results {
	border-radius: 3px 3px 0 0 ;
}

.map-search input[type='text'] {
	font-size:12px;
	width:100%;
	border:0;
	background-color:transparent;
	height:40px;
	margin:0;
	color:rgba(0,0,0,.5);
	padding:10px 10px 10px 40px;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
}

.map-search input:focus {
	color:rgba(0,0,0,.75);
	outline:0;
	box-shadow:none;
	/*border: 0;*/
	outline:thin dotted\8;
}

.map-search .map-search-icon-loading {
	display: none;
	position:absolute;
	top:10px;
	right:10px;
}

.map-search.searching .map-search-icon-loading {
	display: block;
}

.map-search .map-search-icon-search {
	position:absolute;
	top:10px;
	left:10px;
}


.map-search .map-search-icon-close {
	display: none;
	position:absolute;
	top:10px;
	right:10px;
	cursor: pointer;
}

.map-search.show-results .map-search-icon-close {
	display: block;
}

.map-search.show-results:after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background: #eaeaea;
}

.map-search.show-results.big-visible:after {
	background: #d0d0d0;
}

.map-search .suggestions {
	display: none;
	position: absolute;
	top: 42px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
	z-index: 10;
	overflow: hidden;
	/*border:2px solid #d0d0d0;*/
}

.map-search.show-results .suggestions {
	display: block;
}


.map-search .suggestions li,
.map-search .suggestions a {
	width: 100%;
	padding: 6px 10px;
	position: relative;
	background: white;
	padding-left: 40px;
	cursor: pointer;
	display: block;
	color: #000;
}

.map-search .suggestions:hover li, .map-search .suggestions:hover li.active,
.map-search .suggestions:hover a, .map-search .suggestions:hover a.active {
	background: #fff !important;
}

.map-search .suggestions li .map-search-icon {
	position: absolute;
	left: 10px;
	top: 12px;
}

.map-search .suggestions li.active, .map-search .suggestions li:hover, .map-search .suggestions li.active:hover,
.map-search .suggestions a.active, .map-search .suggestions a:hover, .map-search .suggestions a.active:hover {
	background: #eee !important;
}

.map-search .big {
	position: absolute;
	top: 42px;
	width: 100%;
	margin: 0;
	padding: 0;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
	border-radius: 0 0 3px 3px;
	background: #fff;
	z-index: 15;

	transition: padding .2s ease, background .2s ease, transform .3s ease ;
	transform-origin: center top;
	box-sizing: border-box;
	transform: scale(1);
	cursor: default;
	overflow: hidden;
}

.map-search .big.under {
	z-index: 1;
	transform: scale(0.95);
}


.map-search .content {	
	position: relative;
	transition: padding .2s ease;
	padding: 6px 20px 6px 20px;
}

.map-search .pre-big .content {	
	padding: 6px 10px 6px 40px;
}

.map-search .suggestions li.big .header-image,
.map-search .suggestions a.big .header-image {
	max-width: 100%;
}


.big:before {
	opacity: 0;
}
.pre-big:before {
	opacity: 1;
}

.map-search .suggestions li .title, .big .title,
.map-search .suggestions a .title, .big .title {
	font-weight: bold;
	transition: font-size .3s ease;
}

.map-search .suggestions li .sub, .big .sub,
.map-search .suggestions a .sub, .big .sub {
	text-transform: uppercase;
	font-size: 11px;
	color: #999;
	margin-top: -2px;
	transition: all .3s ease;
}

.map-search .suggestions li.big .title,
.map-search .suggestions a.big .title {
	font-size: 18px;
}

.map-search .suggestions li.big .sub,
.map-search .suggestions a.big .sub {
	font-size: 14px;
	margin-top: 2px;

}

.map-search .suggestions li:after,
.map-search .suggestions a:after {
	content: '';
	position: absolute;
	width: 96%;
	background: #eee;
	height: 1px;
	left: 2%;
	top: -1px;
}

.map-search .suggestions li:hover:after,
.map-search .suggestions a:hover:after {
	width: 100%;
	left: 0;
}

.map-search .suggestions li:first-child:after,
.map-search .suggestions a:first-child:after {
	display: none;
}

.map-search .suggestions li:last-child,
.map-search .suggestions a:last-child {
	border-radius: 0 0 3px 3px ;
}

.search-btn-container {
	box-sizing: border-box;
	padding: 20px;
	width: 100%;
	display: flex;
	position: absolute;
	bottom: 0;
	transition: .3s ease;
}

.hide-buttons .search-btn-container {
	bottom: -50px;
}

.search-btn-container a, .search-btn-container label {
	background: #afa;
	width: 100%;
	margin-right: 10px;

	padding: 4px 10px;
	text-align: center;
	background: #e99531;
	color: #fff;
}

.search-btn-container a:last-child,  .search-btn-container label:last-child {
	margin-right: 0;
}

.map-search.mobile .header-image {
	max-height: 0;
}

.map-search.mobile .big {
	/*max-height: 100px;*/
}

.map-search.hidden {
	display: none;
}

.marker {
	width: 48px;
	height: 48px;
	background: url('https://home.wol.org/api/im/map-preview/missionary-icon.png');
	background-size: 100%;
}

@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } }
@-ms-keyframes rotate { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* icons */
.map-search-icon {
	display:inline-block;
	width:20px;
	height:20px;
	vertical-align:middle;
	speak:none;
	background-repeat:no-repeat;
}

.mapboxgl-ctrl-bottom-left {
	z-index: 0 !important;
}

.map-search .suggestions li:before, .big:before,
.map-search .suggestions a:before {
	content: '';
	width: 16px;
	height: 16px;
	position: absolute;
	left: 10px;
	top: 15px;
	transition: all .15s ease;
}

.map-search .suggestions li.no-results,
.map-search .suggestions a.no-results {
	font-size: 12px;
	padding-left: 20px;
	color: #aaa;
	background: #fff !important;
	cursor: default;
}

.region-location-button {
	color: #e99531;
	text-decoration: none;
	cursor: pointer;
}

.region-location-button:hover {
	text-decoration: underline;
}

.map-search-icon-search {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIj4NCiAgPHBhdGggZD0iTTguNSA0QzYgNCA0IDYgNCA4LjUgNCAxMSA2IDEzIDguNSAxMyA5LjQgMTMgMTAuMiAxMi44IDEwLjggMTIuM0wxMC45IDEyLjMgMTQuMyAxNS43QzE0LjUgMTUuOSAxNC43IDE2IDE1IDE2IDE1LjYgMTYgMTYgMTUuNiAxNiAxNSAxNiAxNC43IDE1LjkgMTQuNSAxNS43IDE0LjNMMTIuMyAxMC45IDEyLjMgMTAuOEMxMi44IDEwLjIgMTMgOS40IDEzIDguNSAxMyA2IDExIDQgOC41IDR6TTguNSA1LjVDMTAuMiA1LjUgMTEuNSA2LjggMTEuNSA4LjUgMTEuNSAxMC4yIDEwLjIgMTEuNSA4LjUgMTEuNSA2LjggMTEuNSA1LjUgMTAuMiA1LjUgOC41IDUuNSA2LjggNi44IDUuNSA4LjUgNS41eiIgZmlsbD0iIzAwMCIvPg0KPC9zdmc+);
}
.map-search-icon-close {
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgdmVyc2lvbj0iMS4xIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiPg0KICA8cGF0aCBkPSJtNSA1IDAgMS41IDMuNSAzLjUtMy41IDMuNSAwIDEuNSAxLjUgMCAzLjUtMy41IDMuNSAzLjUgMS41IDAgMC0xLjUtMy41LTMuNSAzLjUtMy41IDAtMS41LTEuNSAwLTMuNSAzLjUtMy41LTMuNS0xLjUgMHoiIGZpbGw9IiMwMDAiLz4NCjwvc3ZnPg==);
}
.map-search-icon-loading {
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGQ9Im0xMCAyIDAgMy4zYzIuNiAwIDQuNyAyLjEgNC43IDQuN2wzLjMgMGMwLTQuNC0zLjYtOC04LTh6IiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTEwIDJDNi44IDIgMy43IDQuMSAyLjYgNy4xIDEuNCAxMCAyLjEgMTMuNiA0LjUgMTUuOGMyLjQgMi40IDYuNCAyLjkgOS40IDEuMiAyLjUtMS40IDQuMi00LjIgNC4yLTctMS4xIDAtMi4yIDAtMy4zIDAgMC4xIDIuMi0xLjcgNC4zLTMuOCA0LjZDOC43IDE1IDYuNCAxMy44IDUuNyAxMS43IDQuOCA5LjcgNS42IDcuMSA3LjYgNiA4LjMgNS42IDkuMSA1LjMgMTAgNS4zYzAtMS4xIDAtMi4yIDAtMy4zeiIgc3R5bGU9ImZpbGw6IzAwMDtvcGFjaXR5OjAuMiIvPjwvc3ZnPg==);
	-webkit-animation: rotate 400ms linear infinite;
	-moz-animation: rotate 400ms linear infinite;
	-ms-animation: rotate 400ms linear infinite;
	animation: rotate 400ms linear infinite;
}

.map-search .suggestions li.location:before, .location:before,
.map-search .suggestions a.location:before {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTgsLjFBNS42MSw1LjYxLDAsMCwwLDIuMzgsNS43MkMyLjM4LDguODMsOCwxNS45LDgsMTUuOXM1LjYyLTcuMDcsNS42Mi0xMC4xOEE1LjYxLDUuNjEsMCwwLDAsOCwuMVpNOCw3LjY2QTEuOTQsMS45NCwwLDEsMSw5Ljk0LDUuNzIsMS45NCwxLjk0LDAsMCwxLDgsNy42NloiLz48L3N2Zz4=);
}

.map-search .suggestions li.missionary:before, .missionary:before,
.map-search .suggestions a.missionary:before {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTE0LjExLDE0LjU5SDEuODlWMTMuNDNjMC0yLjUyLDIuNzQtNC41Niw2LjExLTQuNTZzNi4xMSwyLDYuMTEsNC41NlpNOCwxLjQxQTMuMywzLjMsMCwxLDAsMTEuMyw0LjcsMy4yOSwzLjI5LDAsMCwwLDgsMS40MVoiLz48L3N2Zz4=);
}

.map-search .suggestions li.region:before, .region:before,
.map-search .suggestions a.region:before {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTgsLjkyQTcuMDgsNy4wOCwwLDEsMCwxNS4wOCw4LDcuMDgsNy4wOCwwLDAsMCw4LC45MlptNi4xNiw3YTQuNzIsNC43MiwwLDAsMS0uMzksMi4zNSw2LjA1LDYuMDUsMCwwLDEtMi44OSwzLjE5LDYuMTQsNi4xNCwwLDAsMS03LjI0LTEuMTVsLjQ2LTEuNDYtLjYtLjc0LDAtLjhMMiw5LjMxYTUuMDgsNS4wOCwwLDAsMS0uMTItMS45bC41My0uNDcuMzUtMS4xLDAtMS4wN2MuMTktLjI5LjM5LS41Ny41OS0uODZsLjIyLjQyaC43OEw1LDMuODlsLS4xMy0uNTEtLjctLjNhNiw2LDAsMCwxLDcuNTksMGwtMS40Ni4xOUw5LjA3LDIuODNsLTEuNDIuNjZoLS45bC0uMjkuNTcuNjcuMTcuNDMtLjQzLjU4LjEzLS4yMi40TDYuNjgsNSw2LjE3LDYuM2guNkw4LDUuNDksOSw2LjNsMS4xOS4xN0wxMCw2Ljg4SDguMzVMOCw2LjM1bC0xLjY4LjMzTDUuNTcsOC42MWwuOTIsMSwxLjQ1LjIxLjY2LDIuNTNoLjYxTDEwLjYyLDExbC4xLTIuNjksMS40MS0uNzhMMTMuNCw4LjcxWm0tMi43OCwzLS4wNy40Ny0uNDguNDctLjI2LS4xNS41Mi0uNzlaIi8+PC9zdmc+);
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />