Overview
A static JSON file at /assets/data/saudi-cities.json that any page can fetch. Designed as a drop-in source for the autocomplete component, but plain enough to feed into selects, maps, filters, or any other lookup UI.
Major cities and regional towns. Capital cities of each region, governorate seats, and well-known towns are included; very small villages are not.
Covers all administrative regions of the Kingdom: Riyadh, Makkah, Madinah, Eastern Province, Asir, Tabuk, Hail, Northern Borders, Jazan, Najran, Al Bahah, Al Jouf, Al Qassim.
Each entry carries both English (Name) and Arabic (NameAr) names. Switch which language drives display by changing data-name on the consuming component.
Static JSON served alongside the rest of the assets. Works with any consumer that can fetch() a URL — no Jekyll dependency, no rebuild required.
Schema
Each entry in the array follows this shape
| Field | Type | Description |
|---|---|---|
Id | integer | Stable numeric identifier. Use as a row key when caching or submitting. |
Region | string | Administrative region the city belongs to, in English. |
RegionAr | string | Administrative region the city belongs to, in Arabic. |
Name | string | City name in English (Latin transliteration). |
NameAr | string | City name in Arabic. |
With Autocomplete
Point an autocomplete input at the JSON, set data-fetch="once", and you get an instant city picker that loads the dataset on first keystroke and filters it client-side
Bilingual Search & Custom Display
Pass filter and renderItem callbacks to NDS.Autocomplete.create() to match across both languages and show a richer label. The selected value still comes from data-name.
Direct Access
For non-autocomplete use — populate a select, build a region tree, draw a map, etc.
Notes
- The dataset is editorial — it favors administrative seats and well-known towns over an exhaustive census of every village. Expect to extend it for use cases that need full coverage.
- Latin transliterations follow common English-language conventions, not a strict standard. Searches may need to handle alternate spellings (e.g., Mecca vs Makkah) — wire that into your
filtercallback rather than duplicating entries. - Total response size is well under the autocomplete component's 1 MB cap. Safe to load with
data-fetch="once"on any device.