使用 OnClick 事件过滤 HTML 文档

Question

我正在通过从 SharePoint 列表收集的 JSON 数据创建 HTML 文档。目前，我完成了大约 80% 的预期结果。

现在我不包括我的 fetch 来提取信息，因为由于 CORS 无法跨站点收集 JSON，所以我包含了从 fetch 收集的 JSON 的硬编码版本。

截至目前，我的所有 HTML 都按应有的方式附加。这些是我目前面临的问题：

• 隐藏所有内容（搜索栏除外），使其仅在 onClick 或 onSearch 事件中出现。
• 能够过滤数组中的所有 JSON 对象，仅显示具有相应日期的对象并隐藏其他对象（即 Raiders 和 Eagles 的 WeekOf 值均为 2021-01-31 而 Vikings 的 WeekOf 值值是 2021-03-30。所以如果我搜索 2021-01-31，只会出现两个团队。
• 在标题“每周团队报告”下方，有一个包含文本<p> Week Of ____</p> 的段落标签。 ____ 在哪里, 我希望出现用于搜索和排序材料的 Week Of (即如果我搜索 2021-01-31, 显然只有 Raiders 和 Eagles 报告会显示, 而且在主要 Weekly Team 下报告标题，段落标签为Week of 2021-01-31。

以下是我用于研究的一些文档/文章：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
• https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

更新 我已经实现了一个搜索栏和按钮，我打算将其用于查询/过滤器以及隐藏/显示我正在搜索的数据。在这种情况下，基于我通过搜索栏输入的日期（WeekOf）数据。

• 我尝试使用按钮实现 onClick() 和 onSearch() 函数，而 onSearch() 失败并出现 Uncaught TypeError: $(...).search is not a function，当我实现 onClick() 函数时，页面加载为空白，这很好。但是，只要我在搜索框中单击，页面就会加载，当我单击搜索时，我会收到错误 404。我假设搜索不起作用，因为我还没有设置我的查询/过滤器需要并且是必不可少的。

var data = [
    {
      "Team": "Eagles",
      "WeekOf": "2021-01-31",
      "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    },
{
      "Team": "Raiders",
      "WeekOf": "2021-01-31",
      "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    },
{
      "Team": "Vikings",
      "WeekOf": "2021-03-30",
      "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    }
  ];

function onSuccess(data) {
     var listContent = [];
   
     for (var i = 0; i < data.length; i++) {
         listContent += '<h2>' + data[i].Team  + '</h2>';
         listContent += '<h4> Tasks </h4>';
         listContent += '<ul>' + "- " + data[i].Tasks + '</ul>';
         listContent += '<h4> Deliverables </h4>';

         listContent += '<ul>' + "- " + data[i].Deliverables + '</ul>';
         listContent += '<h4> Personnel Actions </h4>';

         listContent += '<ul>' + "- " + data[i].Actions + '</ul>';
         listContent += '<h4> Finance (Billable) </h4>';

         listContent += '<ul>' + "- " + data[i].Billable + '</ul>';
         listContent += '<h4> Finance (Non-Billable) </h4>';

         listContent += '<ul>' + "- " + data[i].NonBillable + '</ul>';
         listContent += '<h4> Upcoming Events </h4>'
         listContent += '<ul>' + "- " + data[i].UpcomingEvents + '</ul>';
         listContent += '<h4> Training </h4>';

         listContent += '<ul>' + "- " + data[i].Training + '</ul>';
         listContent += '<h4> Resource Request </h4>';
         listContent += '<ul>' + "- " + data[i].Resource + '</ul>';
         listContent += '<h4> Support Request </h4>';
         listContent += '<ul>' + "- " + data[i].Support + '</ul>';
         listContent += '</li>';
 }
   $('#report-summary').html(listContent);
  }
  $(document).click(function(){
    onSuccess(data);
  });

h2{
 text-align: left;
 text-decoration: underline;
 font-size: 20px;
}
h1{
  font-size: 25px;
  text-align: center;
}
ul {
  list-style-type: none;
  padding: 0px;
  margin-left: 0px;
}
span{
  font-size: 15px;
}
#report-summary{
  margin-left: 15px;
  margin-right: 15px;
}
p{
  text-align: center;
}
h4{
  font-size: 17px;
  font-weight: normal;
  text-decoration: underline;
  margin-top: -10px;
  margin-bottom: -10px;
}
/* Style the search field */
form.example input[type=datetime] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
    box-sizing: border-box;
}
/* Style the submit button */
form.example button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #104723;
  color: #b3ab7d;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none; /* Prevent double borders */
  cursor: pointer;
    box-sizing: border-box;
}

form.example button:hover {
  background: #0b7dda;
    box-sizing: border-box;
}

/* Clear floats */
form.example::after {
  content: "";
  clear: both;
  display: table;
    box-sizing: border-box;
}
input,
input::-webkit-input-placeholder {
    font-size: 14px;
    line-height: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<form class="example" style="margin:auto;max-width:300px">
  <input onClick="myFunction()" type="datetime" placeholder="Search for Week Of (MM/DD/YYYY)" id="search">
  <button type="submit" id="myelement"><i class="fa fa-search"></i></button>
</form>

<h1>
Weekly Team Report
</h1>
<p>
Week of 
</p>
<div id="report-summary">

</div>

Answer 1

让我看看你是否理解正确。那是你要的吗？ 同样关于排序部分，代码末尾有2个函数可以按日期对内容进行排序。一个是从最旧到最新的，另一个是相反的。

var data = [
    {
      "Team": "Eagles",
      "WeekOf": "2021-01-31",
      "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    },
{
      "Team": "Raiders",
      "WeekOf": "2021-01-31",
      "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    },
{
      "Team": "Vikings",
      "WeekOf": "2021-03-30",
      "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    }
  ];

function onSuccess(data) {
     var listContent = [];
   
     for (var i = 0; i < data.length; i++) {
         listContent += '<li data-weekOf="'+data[i].WeekOf+'">';
         listContent += '<h2>' + data[i].Team  +'</h2>';
         listContent += '<h4> Tasks </h4>';
         listContent += '<ul>' + "- " + data[i].Tasks + '</ul>';
         listContent += '<h4> Deliverables </h4>';

         listContent += '<ul>' + "- " + data[i].Deliverables + '</ul>';
         listContent += '<h4> Personnel Actions </h4>';

         listContent += '<ul>' + "- " + data[i].Actions + '</ul>';
         listContent += '<h4> Finance (Billable) </h4>';

         listContent += '<ul>' + "- " + data[i].Billable + '</ul>';
         listContent += '<h4> Finance (Non-Billable) </h4>';

         listContent += '<ul>' + "- " + data[i].NonBillable + '</ul>';
         listContent += '<h4> Upcoming Events </h4>'
         listContent += '<ul>' + "- " + data[i].UpcomingEvents + '</ul>';
         listContent += '<h4> Training </h4>';

         listContent += '<ul>' + "- " + data[i].Training + '</ul>';
         listContent += '<h4> Resource Request </h4>';
         listContent += '<ul>' + "- " + data[i].Resource + '</ul>';
         listContent += '<h4> Support Request </h4>';
         listContent += '<ul>' + "- " + data[i].Support + '</ul>';
         listContent += '</li>';
 }
   $('#report-summary').html(listContent);
   $('li').fadeOut(10);
   $('#under_txt').text(' ');
  }
  $(document).ready(function(){
    onSuccess(data);
  });
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $('#under_txt').text(value);
    $('li').fadeOut(10);
    $('[data-weekOf='+value+']').fadeIn();
  });
  
});
function sortNewestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(b).attr('data-weekOf')) - new Date($(a).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
 }
function sortOldestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(a).attr('data-weekOf')) - new Date($(b).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
 }

h2{
 text-align: left;
 text-decoration: underline;
 font-size: 20px;
}
h1{
  font-size: 25px;
  text-align: center;
}
ul {
  list-style-type: none;
  padding: 0px;
  margin-left: 0px;
}

span{
  font-size: 15px;
}
#report-summary{
  margin-left: 15px;
  margin-right: 15px;
}
#search{
  text-align: center;
}
p{
  text-align: center;
}
h4{
  font-size: 17px;
  font-weight: normal;
  text-decoration: underline;
  margin-top: -10px;
  margin-bottom: -10px;
}
#myInput{
  text-align: center;
}
#under_txt{
border-bottom:1px solid black;
margin-left: 5px;
padding: 0px 10px 0px 10px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

<div id="search">
<input id="myInput" type="datetime" placeholder="Search for Week Of">
</div>

<h1>
Weekly Team Report
</h1>
<p>
Week of <span id="under_txt"> </span>
</p>
<div id="report-summary">

</div>