SearchstaxLocationWidget Angular

SearchStax Site Search solution offers a Angular search-location widget to assist with your custom search page.

The SearchstaxLocationWidget provides a location search input with location-based search functionality.

Usage

function locationDecodeFunction(term: string): Promise<ISearchstaxLocation>{
        return new Promise((resolve) => {
          // make a request to geocoding API to retrieve lat, lon and address and then resolve promise
      resolve({
                  address:'Address',
                  lat: lat,
                  lon: lon,
                  error: false
                });
        });
  }
 <app-searchstax-search-location
            [locationDecode]="locationDecodeFunction"
          >
 </app-searchstax-search-location>

Props

  • locationDecode – Callback function invoked after location input blurs and is used to decode string to coordinates.

Slots

#locationTemplate

Allows customizing the location UI.

Slot props:

  • locationData – data containing info on when to show certain elements
  • inputValue – value of location input
  • locationBlur – Handler for location input blur
  • radiusChange – Handler for location radius change
  • selectValue – Value of radius select
  • inputChange – location input change handler
  • locationError – boolean stating if location has error
  • getCurrentLocation – Handler for getting current location from browser

Usage

<app-searchstax-search-location
            [locationDecode]="locationDecode"
          >
          </app-searchstax-search-location>

Example

<app-searchstax-search-location
            [locationDecode]="locationDecode"
            [templateOverride]="locationTemplate"
          >
            <ng-template
              #locationTemplate
              let-context="context"
              let-locationData="locationData"
              let-inputValue="inputValue"
              let-selectValue="selectValue"
              let-radiusChange="radiusChange"
              let-inputChange="inputChange"
              let-locationBlur="locationBlur"
              let-locationError="locationError"
              let-getCurrentLocation="getCurrentLocation"
            >
              <div
                class="searchstax-location-input-container"
                data-test-id="searchstax-location-input-container"
                *ngIf="locationData"
              >
                <div class="searchstax-location-input-wrapper">
                  <span class="searchstax-location-input-label">NEAR</span>
                  <div class="searchstax-location-input-wrapper-inner">
                    <input
                      type="text"
                      id="searchstax-location-input"
                      class="searchstax-location-input"
                      [ngClass]="{
                        'searchstax-input-location-error': locationError
                      }"
                      placeholder="Zip, Postal Code or City..."
                      aria-label="Search Location Input"
                      data-test-id="searchstax-location-input"
                      [value]="inputValue"
                      (change)="inputChange($event, context)"
                      (blur)="locationBlur(context)"
                    />
                    <button
                      (click)="getCurrentLocation(context)"
                      class="searchstax-get-current-location-button"
                    >
                      Use my current location
                    </button>
                  </div>
                  <span
                    *ngIf="locationData.shouldShowLocationDistanceDropdown"
                    class="searchstax-location-input-label"
                    >WITHIN</span
                  >
                  <select
                    *ngIf="locationData.shouldShowLocationDistanceDropdown"
                    id="searchstax-location-radius-select"
                    class="searchstax-location-radius-select"
                    aria-label="Search Location Radius Select"
                    data-test-id="searchstax-location-radius-select"
                    (change)="radiusChange($event, context)"
                    [(ngModel)]="context.selectValue"
                  >
                    <option
                      *ngFor="
                        let value of locationData.locationSearchDistanceValues
                      "
                      [value]="value.value"
                    >
                      {{ value.label }}
                    </option>
                  </select>
                </div>
              </div>
            </ng-template>
          </app-searchstax-search-location>

Questions?

Do not hesitate to contact the SearchStax Support Desk.