title: Creating a search function for appointments with JavaScript
body: <p>I'm in a group assignment where the current task is making a search function where the user can search the records with keywords. The keywords are case insensitive. Examples are: If a user searches a, anything that has a in subject for the venue will be displayed, it could be class or Toowoomba, everything that contains a. The same goes for numbers; if 1 is searched, it doesn't matter where it includes it, but it must be displayed.</p>
  <p>I think everything is being sorted correctly, but I'm having trouble making it display. If anyone could help, I would thoroughly appreciate it.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    
                  var list = [{date: "12/12/2020",
                               startTime: "08:00",
                               endTime: "09:00",
                               subject: "Mathematics",
                               venue: "Lab 10",
                               priority: "High"},]           
                  function searchFucntion(searchValue, searchArray) {
                  
                  function displayResults()
                  {
                  return "&lt;tr&gt;&lt;td&gt;" + this.date + "&lt;/td&gt;&lt;td&gt;" + this.startTime + "&lt;/td&gt;&lt;td&gt;" + this.endTime + "&lt;/td&gt;&lt;td&gt;" + this.subject + "&lt;/td&gt;&lt;td&gt;" + this.venue + "&lt;/td&gt;&lt;td&gt;" + this.priority + "&lt;/td&gt;&lt;/tr&gt;";
                  }
      
                  let searchObject = {
                      date: "",
                      startTime: "",
                      endTime: "",
                      subject: "",
                      venue: "",
                      priority: "",
                      rowData: function () {
                          "&lt;tr&gt;&lt;td&gt;" + this.date + "&lt;/td&gt;&lt;td&gt;" + this.startTime + "&lt;/td&gt;&lt;td&gt;" + this.endTime + "&lt;/td&gt;&lt;td&gt;" + this.subject + "&lt;/td&gt;&lt;td&gt;" + this.venue + "&lt;/td&gt;&lt;td&gt;" + this.priority + "&lt;/td&gt;&lt;/tr&gt;";
                      }}
                      let objectEntryTest = Object.create(searchObject)
      
                  searchArray = list
                  searchValue = document.getElementById("searchInput").value;
                  searchValue = searchValue.toLowerCase();
                  var tempList = [];
                  var i;
                  var j;
                  var temp;
                  for (i = 0; i &lt; searchArray.length; i++) {
      
                      if (list[i].date.indexOf(searchValue) != -1 ||
                      list[i].startTime.indexOf(searchValue) != -1 ||
                      list[i].endTime.indexOf(searchValue) != -1 ||
                      list[i].subject.indexOf(searchValue) != -1 ||
                      list[i].venue.indexOf(searchValue) != -1 ||
                      list[i].priority.indexOf(searchValue) != -1) {
                          searchObject.date = searchArray[i].date
                          searchObject.startTime = searchArray[i].startTime
                          searchObject.endTime = searchArray[i].endTime
                          searchObject.subject = searchArray[i].subject
                          searchObject.venue = searchArray[i].venue
                          searchObject.priority = searchArray[i].priority
                          tempList.push(searchObject)
                      }
                  }
                  for (i = 0; i &lt; tempList.length - 1; i++) {
                      for (j = 0; j &lt; tempList.length - 1; j++) {
                          if (tempList[j].date.substring(0, 2) &lt; tempList[j + 1].date.substring(0, 2)) {
                              temp = tempList[j];
                              tempList[j] = tempList[j + 1];
                              tempList[j + 1] = temp;
                          }
                      }
                  }
                  for (i = 0; i &lt; tempList.length - 1; i++) {
                      for (j = 0; j &lt; tempList.length - 1; j++) {
                          if (tempList[j].date.substring(3, 5) &lt; tempList[j + 1].date.substring(3, 5)) {
                              temp = tempList[j];
                              tempList[j] = tempList[j + 1];
                              tempList[j + 1] = temp;
                          }
                      }
                  }
                  for (i = 0; i &lt; tempList.length - 1; i++) {
                      for (j = 0; j &lt; tempList.length - 1; j++) {
                          if (tempList[j].date.substring(6, 10) &lt; tempList[j + 1].date.substring(6, 10)) {
                              temp = tempList[j];
                              tempList[j] = tempList[j + 1];
                              tempList[j + 1] = temp;
                          }
                      }
                  }
                  for (i = 0; i = tempList.length; i++) {
                      let sResultTable = document.getElementById("sResultTable");
                      sResultTable.innerHTML += displayResults(tempList[i]);
                  }
              }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;body&gt;
          &lt;script&gt;
  
      
      
          &lt;/script&gt;
          &lt;title&gt;Diary&lt;/title&gt;
          &lt;h1 style="text-align: center;"&gt;Diary&lt;/h1&gt;
          &lt;form&gt;
              &lt;table bgcolor="#cccccc" cellpadding="5" cellspacing="0" align="center"&gt;
                  &lt;tr&gt;
                      &lt;td align="right"&gt;Date&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" id="date" name="date" size="10" placeholder="dd/mm/yyyy"&gt;&lt;/td&gt;
                      &lt;td align="right"&gt;Start Time&lt;/td&gt;
                      &lt;td&gt;
                          &lt;select id="startTime"&gt;
                              &lt;option value="08:00"&gt;08:00&lt;/option&gt;
                              &lt;option value="09:00"&gt;09:00&lt;/option&gt;
                              &lt;option value="10:00"&gt;10:00&lt;/option&gt;
                              &lt;option value="11:00"&gt;11:00&lt;/option&gt;
                              &lt;option value="12:00"&gt;12:00&lt;/option&gt;
                              &lt;option value="13:00"&gt;13:00&lt;/option&gt;
                              &lt;option value="14:00"&gt;14:00&lt;/option&gt;
                              &lt;option value="15:00"&gt;15:00&lt;/option&gt;
                              &lt;option value="16:00"&gt;16:00&lt;/option&gt;
                              &lt;option value="17:00"&gt;17:00&lt;/option&gt;
                              &lt;option value="18:00"&gt;18:00&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/td&gt;
                      &lt;td align="right"&gt;End Time&lt;/td&gt;
                      &lt;td&gt;
                          &lt;select id="endTime"&gt;
                              &lt;option value="08:00"&gt;08:00&lt;/option&gt;
                              &lt;option value="09:00"&gt;09:00&lt;/option&gt;
                              &lt;option value="10:00"&gt;10:00&lt;/option&gt;
                              &lt;option value="11:00"&gt;11:00&lt;/option&gt;
                              &lt;option value="12:00"&gt;12:00&lt;/option&gt;
                              &lt;option value="13:00"&gt;13:00&lt;/option&gt;
                              &lt;option value="14:00"&gt;14:00&lt;/option&gt;
                              &lt;option value="15:00"&gt;15:00&lt;/option&gt;
                              &lt;option value="16:00"&gt;16:00&lt;/option&gt;
                              &lt;option value="17:00"&gt;17:00&lt;/option&gt;
                              &lt;option value="18:00"&gt;18:00&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/td&gt;
      
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="right"&gt;Subject:&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" id="subject" size="10"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="right"&gt;Venue:&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" id="venue" size="10"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
      
                  &lt;tr&gt;
                      &lt;td valign="top" align="center"&gt;Priority&lt;/td&gt;
                      &lt;td&gt;&lt;input type="radio" id="high" name="Priority" value="High" checked="true" /&gt; High&lt;br /&gt;
                      &lt;td&gt;&lt;input type="radio" id="medium" name="Priority" value="Medium" /&gt; Medium&lt;br /&gt;
                      &lt;td&gt;&lt;input type="radio" id="low" name="Priority" value="Low" /&gt; Low&lt;br /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;&lt;input type="button" value="Add Appointment" onclick="addAppointment()" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;&lt;input type="button" value="Search" onclick="searchFucntion()" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td align="right"&gt;Search:&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="searchInput" size="10"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;hr&gt;
      
              &lt;div&gt;
                  &lt;table align="center" width="80%" height="150px" cellpadding="1px" cellspacing="1px" border="1" id="table1"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th width="50"&gt;Date&lt;/th&gt;
                              &lt;th width="20"&gt;Start&lt;/th&gt;
                              &lt;th width="20"&gt;End&lt;/th&gt;
                              &lt;th width="75"&gt;Subject&lt;/th&gt;
                              &lt;th width="60"&gt;Venue&lt;/th&gt;
                              &lt;th width="5"&gt;Priority&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody id="tbody"&gt; &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;&lt;input type="reset" value="Randomise Appointments" onclick="shuffleAppointments()" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;&lt;input type="button" value="Sort Appointments" onclick="sortRecords()" /&gt;&lt;/td&gt;
                  &lt;td&gt;by&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select id="Date"&gt;
                          &lt;option value="date"&gt;Date&lt;/option&gt;
                          &lt;option value="startTime"&gt;Start Time&lt;/option&gt;
                          &lt;option value="endTime"&gt;End Time&lt;/option&gt;
                          &lt;option value="subject"&gt;Subject&lt;/option&gt;
                          &lt;option value="venue"&gt;Venue&lt;/option&gt;
                          &lt;option value="priority"&gt;Priority&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;hr&gt;Search Results
              &lt;div&gt;
                  &lt;table align="center" width="80%" height="150px" cellpadding="1px" cellspacing="1px" border="1" id="table1"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th width="50"&gt;Date&lt;/th&gt;
                              &lt;th width="20"&gt;Start&lt;/th&gt;
                              &lt;th width="20"&gt;End&lt;/th&gt;
                              &lt;th width="75"&gt;Subject&lt;/th&gt;
                              &lt;th width="60"&gt;Venue&lt;/th&gt;
                              &lt;th width="5"&gt;Priority&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody id="sResultTable"&gt; &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;/hr&gt;
      
      
      
      
              &lt;/table&gt;
          &lt;/form&gt;
      
      
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>