let fitler = document.querySelector("#filter");
let lastFilterValue = "";


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");
            }
        }
    })    
}

filter.addEventListener("keyup", (ev) => {
    ev.preventDefault();
    
    if (filter.value == lastFilterValue) {
        return;
    }
    lastFilterValue = filter.value;
    
    applyFilter(filter.value);
})

fitler.focus();