Tutorial
Autocomplete localități România în JavaScript — tutorial pas cu pas
29 aprilie 2026 · 7 min citire
Ai un formular cu câmpul "Localitate" unde utilizatorii scriu liber? Treci la autocomplete. Eviți greșeli de scriere, diacritice lipsă, și — cel mai important — erori la e-Factura.
De ce ai nevoie de autocomplete?
- Utilizatorul scrie "clujj" → autocomplete sugerează "Cluj-Napoca"
- Scrie "floresti" → vede Florești (CJ), Florești (IF), Florești (PH) — selectează cel corect
- Selectarea include automat județul, codul poștal, coordonatele
- Zero erori "Localitate client incorectă" pe e-Factura
Varianta 1: Vanilla JavaScript
<input id="locality" placeholder="Caută localitate..." />
<div id="suggestions"></div>
<script>
let timer;
document.getElementById('locality')
.addEventListener('input', (e) => {
clearTimeout(timer);
timer = setTimeout(async () => {
const q = e.target.value;
if (q.length < 2) return;
const res = await fetch(
`https://api.localitati.dev/v1/search?q=${q}&limit=5`
);
const { results } = await res.json();
const html = results.map(r =>
`<div onclick="select('${r.name}', '${r.county.code}')">
${r.name} (${r.county.name}) — ${r.type}
</div>`
).join('');
document.getElementById('suggestions')
.innerHTML = html;
}, 200);
});
</script>
Varianta 2: React
function LocalityAutocomplete({ onSelect }) {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
useEffect(() => {
if (query.length < 2) { setResults([]); return; }
const timer = setTimeout(async () => {
const res = await fetch(
`https://api.localitati.dev/v1/search?` +
`q=${encodeURIComponent(query)}&limit=5`,
{ headers: { 'X-API-Key': 'sk_live_...' } }
);
const data = await res.json();
setResults(data.results || []);
}, 200);
return () => clearTimeout(timer);
}, [query]);
return (
<div>
<input
value={query}
onChange={e => setQuery(e.target.value)}
placeholder="Caută localitate..."
/>
{results.map(r => (
<div key={r.siruta} onClick={() => {
onSelect({
name: r.name,
county: r.county.code,
countyName: r.county.name,
postalCode: r.postal_code,
siruta: r.siruta,
});
setQuery(r.name);
setResults([]);
}}>
{r.name} ({r.county.name}) — {r.type}
</div>
))}
</div>
);
}
Features gratis
- Fuzzy search — "clujj", "salistea", "timisora" funcționează
- Fără diacritice — "Brasov" → "Brașov"
- Județul atașat — fiecare rezultat vine cu county.code + county.name
- Cod poștal — auto-fill al codului poștal la selectare
- 20 req/zi fără cont — testezi instant din terminal
Creează cont gratuit pentru 100 req/zi, sau vezi prețurile pentru producție.