screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <title>Get Day from Date</title> </head> <body> <h2>Javascript implement search functionality in array of objects</h2> <h3>Search by Name</h3> <input type="text" id="search-input" placeholder="Search..." /> <div id="output-container"></div> <script> function initialize() { const items = [ { id: 1, name: "John Smith", role: "Frontend Developer" }, { id: 2, name: "Jane Doe", role: "Backend Developer" }, { id: 3, name: "David Johnson", role: "Full Stack Developer" }, { id: 4, name: "Emily Williams", role: "UI/UX Designer" }, { id: 5, name: "Michael Brown", role: "Data Scientist" }, { id: 6, name: "Olivia Miller", role: "Product Manager" }, { id: 7, name: "Daniel Wilson", role: "DevOps Engineer" }, { id: 8, name: "Sophia Davis", role: "Software Engineer" }, { id: 9, name: "Matthew Taylor", role: "QA Tester" }, { id: 10, name: "Emma Anderson", role: "Systems Analyst" }, { id: 11, name: "Christopher Martinez", role: "Database Administrator", }, { id: 12, name: "Ava Clark", role: "Network Engineer" }, { id: 13, name: "Joshua Rodriguez", role: "Security Specialist" }, { id: 14, name: "Mia Thomas", role: "Technical Writer" }, { id: 15, name: "Andrew Lee", role: "Scrum Master" }, ]; const data = { items, searchQuery: "", filteredItems() { return this.items.filter((item) => item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ); }, updateSearchQuery(event) { this.searchQuery = event.target.value; updateOutputContainer(); }, }; const outputContainer = document.getElementById("output-container"); const searchInput = document.getElementById("search-input"); function updateOutputContainer() { const filteredItems = data.filteredItems(); const table = ` <table> <tr> <th>ID</th> <th>Name</th> <th>Category</th> </tr> ${filteredItems .map( (item) => ` <tr> <td>${item.id}</td> <td>${item.name}</td> <td>${item.role}</td> </tr> ` ) .join("")} </table> `; outputContainer.innerHTML = table; } searchInput.addEventListener( "input", data.updateSearchQuery.bind(data) ); updateOutputContainer(); } initialize(); </script> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } /* Styles for the search input */ #search-input { display: block; width: 300px; height: 40px; padding: 10px; font-size: 16px; border: 2px solid #ccc; border-radius: 20px; outline: none; transition: border-color 0.3s ease; } #search-input:focus { border-color: #007bff; } </style> </body> </html>