73 lines
2 KiB
JavaScript
73 lines
2 KiB
JavaScript
async function getCountryData() {
|
|
let countryData = await fetch(`cclist.json`);
|
|
let countryList = await countryData.json();
|
|
|
|
let countryTableBody = document.querySelector("#country-list tbody");
|
|
for (let co of countryList) {
|
|
let newTR = document.createElement("tr");
|
|
newTR.dataset["code"] = co.Code.toLowerCase();
|
|
newTR.dataset["name"] = co.Name.toLowerCase();
|
|
newTR.dataset["role"] = "country";
|
|
|
|
let newTD = document.createElement("td");
|
|
newTD.textContent = co.Code;
|
|
newTR.appendChild(newTD);
|
|
|
|
newTD = document.createElement("td");
|
|
newTD.textContent = co.Name;
|
|
newTR.appendChild(newTD);
|
|
|
|
countryTableBody.appendChild(newTR);
|
|
}
|
|
};
|
|
|
|
function applyFilter(fval) {
|
|
if (fval == "") {
|
|
document.querySelectorAll('tr[data-role="country"]').forEach((x) => {
|
|
x.classList.remove("hidden", "exact");
|
|
})
|
|
}
|
|
|
|
const fvalLower = fval.toLowerCase();
|
|
|
|
document.querySelectorAll('tr[data-role="country"]').forEach((x) => {
|
|
const matches = (x.dataset["code"].indexOf(fvalLower) != -1) ||
|
|
(x.dataset["name"].indexOf(fvalLower) != -1);
|
|
|
|
if (!matches) {
|
|
x.classList.add("hidden");
|
|
x.classList.remove("exact");
|
|
} else {
|
|
x.classList.remove("hidden");
|
|
|
|
if ((x.dataset["code"] == fvalLower) || (x.dataset["name"] == fvalLower)) {
|
|
x.classList.add("exact");
|
|
} else {
|
|
x.classList.remove("exact");
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function setupCountryFilter() {
|
|
let lastFilterValue = "";
|
|
let filter = document.querySelector("#filter");
|
|
filter.addEventListener("keyup", (ev) => {
|
|
ev.preventDefault();
|
|
|
|
if (filter.value == lastFilterValue) {
|
|
return;
|
|
}
|
|
lastFilterValue = filter.value;
|
|
|
|
applyFilter(filter.value);
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
getCountryData();
|
|
setupCountryFilter();
|
|
});
|
|
|
|
|