Location directories

Find-a-branch, find-a-clinic and store-locator search over a hierarchical region → city → site list, with the same ancestor auto-fill as a country picker.

The data shape

A hierarchical list: region, then city, then a specific site (a branch, clinic or store). Each site carries an address and coordinates as metadata; selecting a site can return its city and region as ancestors in the same response.

A worked example

{
  "displayValue": "Downtown Clinic — 4th & Main",
  "value": "site_downtown_4th",
  "metadata": {
    "address": "400 Main St",
    "lat": 39.74,
    "lng": -104.99
  },
  "ancestors": [
    {
      "displayValue": "Colorado",
      "value": "region_co"
    },
    {
      "displayValue": "Denver",
      "value": "city_denver"
    }
  ]
}

Fields

Every field this shape carries and what it means
Field	Type	Meaning
displayValue	string	The site name shown in the results list.
value	string	Your own site identifier.
metadata.address	string	Street address, rendered by a custom result renderer.
ancestors	array	City and region, returned with the selected site (DEC-HIER-001).

Provenance

AutoSugges does not ship a dataset for this shape — you publish your own catalog in this structure.

Integration steps

Publish your directory as a three-level hierarchical list — region, city, site.
Attach address/coordinates as item metadata.
Read the ancestors AutoSugges returns to show or filter by city/region without a second request.

Code

import { Autocomplete } from '@autosugges/client/react';
import { createAutosuggesClient } from '@autosugges/client';

const client = createAutosuggesClient({
  baseUrl: 'https://your-runtime.example.com',
  publishableKey: 'pk_live_YOUR_KEY',
});

<Autocomplete
  source={client}
  label="Location"
  onSelect={(item, { ancestors }) => {
    // ancestors carries the region/country path for a branch or clinic.
    setLocation(item.value);
  }}
/>

The publishable key above is a public, browser-safe identifier — never a secret.