Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Employee Cart</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    #employeeTable {
      border-collapse: collapse;
      width: 100%;
    }

    #employeeTable th, #employeeTable td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    #employeeTable th {
      background-color: #f2f2f2;
    }

    #employeeTable img {
      height: 50px;
      width: auto;
    }
    
    #searchContainer {
      margin-bottom: 20px;
    }
    
    #searchInput, #searchButton {
      padding: 8px;
      font-size: 14px;
    }
    
    #searchButton {
      margin-left: 10px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div id="searchContainer">
    <input type="text" id="searchInput" placeholder="Enter search term">
    <button id="searchButton">Search</button>
  </div>

  <table id="employeeTable">
    <thead>
      <tr>
        <th>Photo</th>
        <th>Name</th>
        <th>Username</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Website</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script>
    $(document).ready(function() {
      var employeeData = []; // Variable to store the fetched employee data
      
      // Make AJAX request to fetch JSON data
      $.ajax({
        url: 'https://jsonplaceholder.typicode.com/users',
        dataType: 'json',
        success: function(data) {
          employeeData = data; // Store the fetched data in the variable

          // Populate the table with employee data
          populateTable(employeeData);
        }
      });

      // Search button click event handler
      $('#searchButton').click(function() {
        var searchTerm = $('#searchInput').val().trim().toLowerCase();
        var filteredData = employeeData.filter(function(employee) {
          return (
            employee.name.toLowerCase().includes(searchTerm) ||
            employee.username.toLowerCase().includes(searchTerm) ||
            employee.email.toLowerCase().includes(searchTerm) ||
            employee.phone.toLowerCase().includes(searchTerm) ||
            employee.website.toLowerCase().includes(searchTerm)
          );
        });

        // Clear the table body and populate with filtered data
        $('#employeeTable tbody').empty();
        populateTable(filteredData);
      });

      // Function to populate the table with employee data
      function populateTable(data) {
        $.each(data, function(index, employee) {
          var row = $('<tr>');
          row.append($('<td>').html('<img src="https://via.placeholder.com/50" alt="Employee Photo">'));
          row.append($('<td>').text(employee.name));
          row.append($('<td>').text(employee.username));
          row.append($('<td>').text(employee.email));
          row.append($('<td>').text(employee.phone));
          row.append($('<td>').text(employee.website));

          $('#employeeTable tbody').append(row);
        });
      }
    });
  </script>
</body>
</html>
Editor is loading...