Javascript implement search functionality in array of objects

<!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>

const outputContainer = document.getElementById("output-container");
        const searchInput = document.getElementById("search-input");

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>

xxxxxxxxxx
 
<!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>
​