Search Box

An always-visible city search — a plain text input with a magnifier (submit) icon button and a "use current location" icon button rendered inline inside it, plus a result <ul> below. No collapsible pill, no flag emoji, no keyboard-nav-heavy UX beyond basic Enter/Space on a result item; that fuller search now lives in OpenWeather's own weather-maps website repo. Debounced query/results/cancellation lives in @openweather/maps-core's SearchController; both renderers only turn its snapshot into markup, so results and timing behave identically either way. The submit button re-asserts the input's current value against the search store — since input already searches live as you type, it exists mainly as a visible, clickable affordance rather than a required step.

DOM — createSearchBox

import { createSearchBox } from '@openweather/maps-ui';

const search = createSearchBox({
  parent: document.body,
  search: controller.search,
  apiKey: 'YOUR_KEY',
  onSelect: (result) => map.flyTo({ center: [result.lon, result.lat], zoom: 8 }),
});

// search.locate() / search.destroy()

Option	Type	Notes
parent	HTMLElement	Mount point (required)
search	SearchController	Typically controller.search
apiKey	string	Used for the reverse-geocode call locate() makes — SearchController has no reverse endpoint of its own
onSelect(result)	(result: GeocodingResult) => void	Called on a typed or located selection
placeholder?	string	Input placeholder text

SearchBoxHandle: locate(options?: { silent?: boolean }) (requests browser geolocation and selects the resolved place), destroy(). There is no imperative focus()/clear() — the input and result list are plain, always-visible DOM, so drive them directly if you need that.

The submit and locate buttons are icon-only (aria-label="Search" / aria-label="Use current location" respectively) — both renderers stamp PART.searchInputWrap on the wrapper positioning them inside the input, and PART.searchSubmit / PART.searchLocate on the buttons themselves.

React — <SearchBox>

import { SearchBox } from '@openweather/maps-react/ui';

<SearchBox
  apiKey="YOUR_KEY"
  search={controller.search}
  onSelect={(result) => map.flyTo({ center: [result.lon, result.lat], zoom: 8 })}
/>;

Prop	Type	Notes
search	SearchController	Same as DOM — unlike the DOM control, this is a prop rather than context-read
apiKey	string	Same as DOM
onSelect(result)	(result: GeocodingResult) => void	Same as DOM
placeholder?	string	Same as DOM
autoLocate?	boolean	Silently request geolocation once on mount, same as the DOM control's search.locate({ silent: true }); failures are ignored
className?	string	Optional

There is no imperative locate()/destroy() handle; wire autoLocate for the silent on-mount case, and rely on the "use current location" button for the user-initiated one.