/*
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("
{
//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
![https://i.stack.imgur.com/ppIAv.png /> tsconfig { "compilerOptions": { "baseUrl": ".", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": false, "strict": true, "noEmit": true, "target": "ES2015", "esModuleInterop": true, "module": "esnext", "strictPropertyInitialization": true, "noUnusedLocals": true, "noUnusedParameters": true, "preserveConstEnums": true, "sourceMap": true, "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "noImplicitAny": false, "plugins": [ { "name": "next" } ], "paths": { "@/layouts/*": ["./layouts/*"], "@/complex/*": ["./components/complex/*"], "@/parts/*": ["./components/parts/*"], "@/inputs/*": ["./components/inputs/*"], "@/forms/*": ["./components/forms/*"], "@/hooks/*": ["./hooks/*"], "@/skeletons/*": ["./components/skeletons/*"], "@/utils/*": ["./utils/*"], "@/middlewares/*": ["./middlewares/*"], "@/providers/*": ["./providers/*"], "@/types/*": ["./types/*"], "@/apiTypes/*": ["./app/api/_types/*"], "@/yupSchema/*": ["./yupSchema/*"], "@/apiYupSchema/*": ["./app/api/_yupSchema/*"], "@/dbPrisma": ["./utils/db.ts"], "@/formsInitialValues/*": ["./formsInitialValues/*"], "@/wretch": ["./utils/wretch"] } }, "include": ["next-env.d.ts", "types/**/*.ts", "app/_types/**/*.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } eslintrc.json { "env": { "browser": true, "es2021": true, "jest": true }, "extends": [ "airbnb", "airbnb-typescript", "eslint:recommended", "plugin:import/typescript", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "plugin:@tanstack/eslint-plugin-query/recommended" ], "globals": { "__dirname": true }, "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": "latest", "sourceType": "module", "project": "./tsconfig.json" }, "plugins": [ "react", "react-hooks", "@typescript-eslint", "prettier", "@kalimahapps/eslint-plugin-tailwind" ], "rules": { "react/react-in-jsx-scope": ["off"], "no-unused-vars": ["off"], "react/jsx-uses-react": ["off"], "react/jsx-props-no-spreading": ["off"], "react/function-component-definition": ["off"], "react/no-unescaped-entities": ["off"], "react-hooks/rules-of-hooks": ["error"], "react-hooks/exhaustive-deps": ["warn"], "react/no-array-index-key": ["off"], "arrow-body-style": ["error", "as-needed"], "import/extensions": ["off"], "import/prefer-default-export": ["off"], "import/no-extraneous-dependencies": ["off"], "@kalimahapps/tailwind/sort": ["warn"], "@kalimahapps/tailwind/multiline": ["warn"], "@typescript-eslint/no-throw-literal": ["off"], "jsx-a11y/click-events-have-key-events": ["off"], "jsx-a11y/no-static-element-interactions": ["off"], "no-return-await": ["off"], "@typescript-eslint/return-await": ["off"], "react/button-has-type": [ "off", { "button": true, "submit": true, "reset": true } ], "padding-line-between-statements": [ "error", { "blankLine": "always", "prev": "*", "next": "return" } ] } } P.S. It's only happend when personal is array, but the error with function parameter check persist anyway. When i do this, and testing, typescript sugges ok, but not error on function parameter personal: { label: string; name: keyof TApiResponseProfile; value: string; activeEdit: boolean; onActionButtonClick: (testing: string) => void; }; Can you guys/girls cam check if tsconfig or eslint have some bug? Ty alot for your time](https://i.stack.imgur.com/ppIAv.png<br){kind=link}