Acest proiect constă într-un motor de căutare creat pentru identificarea orașelor, satelor și localităților din România, folosind un API endpoint specific. Utilizatorii pot introduce numele unei locații într-un câmp de căutare, iar apoi vor primi rezultate relevante despre acea locatie sau locații similare din întreaga țară.
Tehnologiile principale utilizate în acest proiect sunt:
Exemplu de răspuns JSON:
{
"proiect": "LEGE nr. 2 din 16 februarie 1968",
"url": "https://legislatie.just.ro/Public/DetaliiDocument/189",
"nume": "România",
"judet": [
{
"nume": "Alba",
"minicipiu": [
{
"nume": "Alba Iulia",
"localitate": [
{
"nume": "ALBA IULIA",
"tip": "oras"
},
{
"nume": "Bărăbanț",
"tip": "sat"
}
]
},
// ... alte municipii
],
"oras": [
{
"nume": "Abrud",
"localitate": [
{
"nume": "Abrud",
"tip": "oras"
},
{
"nume": "Abrud-Sat",
"tip": "sat"
}
]
},
// ... alte orase
],
"comuna": [
{
"nume": "Albac",
"localitate": [
{
"nume": "Albac",
"tip": "sat"
},
{
"nume": "Bărăști",
"tip": "sat"
}
]
},
// ... alte comune
]
},
// ... alte județe
],
"municipiu": {
"nume": "BUCUREȘTI",
"sector": [
// ... sectoarele Bucureștiului
]
}
}
👁️ Focus la încărcarea paginii
window.onload = function () {
document.getElementById("searchInput").focus();
};
La încărcarea paginii, funcția asigură că elementul cu id-ul "searchInput" primește focus-ul.
🔤 Expresii regulate pentru caractere speciale
const aREG = new RegExp("ș", "g");
const bREG = new RegExp("ț", "g");
const cREG = new RegExp("â", "g");
const dREG = new RegExp("ă", "g");
Expresii regulate pentru caracterele speciale "ș", "ț", "â", "ă" care vor fi folosite ulterior în procesul de căutare.
🔄 Funcția fetchData
- Obținerea datelor de la API
async function fetchData() {
try {
const response = await fetch(`https://orase.peviitor.ro/`);
const data = await response.json();
performSearch(data);
renderDropdown(data);
} catch (error) {
console.error("Error fetching data:", error);
}
}
Funcția utilizează fetch
pentru a obține datele de la API, apoi inițiază funcția de căutare (performSearch
) cu datele obținute.
🔢 Funcția renderDropdown
La click pe un judet, functia displaySelectedData
este apelata pentru a afisa toate locatiile (municipii, orase, comune) din acel judet
Funcționalități cheie:
🌐Generare meniu dropdown:
🔍Afișarea inițială:
🔙Generare buton de înapoi:
🔍 Funcția de căutare principală performSearch
Rezultatele căutării sunt afișate în containerul .searchResults
.
Funcționalități cheie:
📊 Funcția displayResults
- Afișare rezultate
resultsBucuresti
) și pentru județe (results
) și le afișează distinct.🔄 Funcția customSort
- Sortare personalizată
🔍 Funcțiile de căutare searchMunicipiu
și searchLocation
searchMunicipiu
: Caută în municipii și sectoarele acestora.searchLocation
: Caută într-o locație (municipiu, oraș, comună) și recursiv în sublocațiile acesteia.🗑️ Funcția removeDuplicates
- Eliminare duplicați
🧹 Evenimentul de ștergere a conținutului
const deleteIcon = document.querySelector(".delete-icon");
deleteIcon.addEventListener("click", () => {
document.querySelector("#searchInput").value = "";
document.querySelector(".searchResults").innerHTML = "";
document.querySelector(".searchResults").classList.remove("searchResults-display");
});
La click pe iconița de ștergere, se șterge conținutul din input și se ascunde containerul de rezultate.