Search Through exel file using a search html

function applyFilter(userInput){
/*
Use css to set the display to none first
*/
let allClientIDRows = document.querySelectorAll("ClientID-row > a");
for(let i = 0; i < allClientIDRows.length; i++){
let row = allClientIDRows[i]
let ClientID = row.getElementsByClassName("ClientID")[0]
if(allClientIDRows[i].textContent.trim() == userInput.trim()){
//You can also convert to lowercase for more accurate result
allClientIDRows[i].style.display = "inline";
}
}
}



This is the function that applys the filter to allow you to search and show what you search for and not the entire form.
i am only looking to show the searched item and not the entire spreadsheet



Data






Type in your ID















No ID FOUND






Loading








Failed to get data. Please refresh







function setErrorDisplay(loaderElm, allClientIDsElm, errorMessageElm){
loaderElm.style.display = "none"
allClientIDsElm.style.display = "none"
errorMessageElm.style.display = "block"
}

let allClientIDsElm = document.getElementById("allClientIDs")
let loaderElm = document.getElementById("loader")
let errorMessageElm = document.getElementById("errorMessage")

fetch("
{https://api.apispreadsheets.com/data/").then(res=>{ /> if (res.status === 200){
//sucess
res.json().then(data=>{
const yourData = data["data"]
for(let i = 0; i < yourData.length; i++){
let rowInfo = yourData[i]

let rowInfoDiv = document.createElement("div")
rowInfoDiv.classList.add("ClientID-row")

let rowClientID = document.createElement("h4")
let rowClientIDNode = document.createTextNode(rowInfo["ClientID"])
rowClientID.appendChild(rowClientIDNode)
rowClientID.classList.add("ClientID")

let rowRA = document.createElement("p")
let rowRANode = document.createTextNode(rowInfo["RA"])
rowRA.appendChild(rowRANode)
rowRA.classList.add("RA")

rowInfoDiv.appendChild(rowClientID)
rowInfoDiv.appendChild(rowRA)

allClientIDsElm.appendChild(rowInfoDiv)

}

loaderElm.style.display = "none"
allClientIDsElm.style.display = "block"
errorMessageElm.style.display = "none"

}).catch(err => {
setErrorDisplay(loaderElm, allClientIDsElm, errorMessageElm)
})
}
else{
setErrorDisplay(loaderElm, allClientIDsElm, errorMessageElm)
}
}).catch(err =>{
setErrorDisplay(loaderElm, allClientIDsElm, errorMessageElm)
})




This is the HTML part that runs the html search part


For some reason when i run with the function its still showing all the spreadsheet. What i am trying to do is How to make a search list in which element is only shown when user search for its exact value


when you type it shows you the result but the form will be empty untiil you type


i tryed with a search function with a filter but it shows the entire spreadsheet. Maybe i am doing something wrong or messed up somewhere in the code.


the applyfilter isnt working for me maybe there is another way i can do this