【发布时间】：2020-10-07 11:09:49
【问题描述】：
我在一个小组作业中，当前任务是创建一个搜索功能，用户可以使用关键字搜索记录。关键字不区分大小写。示例是：如果用户搜索 a，将显示任何主题为该场所的内容，它可能是 class 或 Toowoomba，所有包含 a 的内容。数字也是如此。如果 1 被搜索到，在哪里包含它都没有关系，但它必须显示出来。
我认为所有内容都已正确排序，但无法显示。如果有人可以提供帮助，我将不胜感激。
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 "<tr><td>" + this.date + "</td><td>" + this.startTime + "</td><td>" + this.endTime + "</td><td>" + this.subject + "</td><td>" + this.venue + "</td><td>" + this.priority + "</td></tr>";
}
let searchObject = {
date: "",
startTime: "",
endTime: "",
subject: "",
venue: "",
priority: "",
rowData: function () {
"<tr><td>" + this.date + "</td><td>" + this.startTime + "</td><td>" + this.endTime + "</td><td>" + this.subject + "</td><td>" + this.venue + "</td><td>" + this.priority + "</td></tr>";
}}
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 < 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 < tempList.length - 1; i++) {
for (j = 0; j < tempList.length - 1; j++) {
if (tempList[j].date.substring(0, 2) < tempList[j + 1].date.substring(0, 2)) {
temp = tempList[j];
tempList[j] = tempList[j + 1];
tempList[j + 1] = temp;
}
}
}
for (i = 0; i < tempList.length - 1; i++) {
for (j = 0; j < tempList.length - 1; j++) {
if (tempList[j].date.substring(3, 5) < tempList[j + 1].date.substring(3, 5)) {
temp = tempList[j];
tempList[j] = tempList[j + 1];
tempList[j + 1] = temp;
}
}
}
for (i = 0; i < tempList.length - 1; i++) {
for (j = 0; j < tempList.length - 1; j++) {
if (tempList[j].date.substring(6, 10) < 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]);
}
}<!DOCTYPE html>
<html lang="en">
<body>
<script>
</script>
<title>Diary</title>
<h1 style="text-align: center;">Diary</h1>
<form>
<table bgcolor="#cccccc" cellpadding="5" cellspacing="0" align="center">
<tr>
<td align="right">Date</td>
<td><input type="text" id="date" name="date" size="10" placeholder="dd/mm/yyyy"></td>
<td align="right">Start Time</td>
<td>
<select id="startTime">
<option value="08:00">08:00</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
</select>
</td>
<td align="right">End Time</td>
<td>
<select id="endTime">
<option value="08:00">08:00</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
</select>
</td>
</tr>
<tr>
<td align="right">Subject:</td>
<td><input type="text" id="subject" size="10"></td>
</tr>
<tr>
<td align="right">Venue:</td>
<td><input type="text" id="venue" size="10"></td>
</tr>
<tr>
<td valign="top" align="center">Priority</td>
<td><input type="radio" id="high" name="Priority" value="High" checked="true" /> High<br />
<td><input type="radio" id="medium" name="Priority" value="Medium" /> Medium<br />
<td><input type="radio" id="low" name="Priority" value="Low" /> Low<br />
</td>
</tr>
</table>
<tr>
<td></td>
<td></td><input type="button" value="Add Appointment" onclick="addAppointment()" /></td>
</tr>
<tr>
<td></td>
<td></td><input type="button" value="Search" onclick="searchFucntion()" /></td>
</tr>
<tr>
<td align="right">Search:</td>
<td><input type="text" id="searchInput" size="10"></td>
</tr>
<hr>
<div>
<table align="center" width="80%" height="150px" cellpadding="1px" cellspacing="1px" border="1" id="table1">
<thead>
<tr>
<th width="50">Date</th>
<th width="20">Start</th>
<th width="20">End</th>
<th width="75">Subject</th>
<th width="60">Venue</th>
<th width="5">Priority</th>
</tr>
</thead>
<tbody id="tbody"> </tbody>
</table>
</div>
<tr>
<td></td>
<td></td><input type="reset" value="Randomise Appointments" onclick="shuffleAppointments()" /></td>
<td></td><input type="button" value="Sort Appointments" onclick="sortRecords()" /></td>
<td>by</td>
<td>
<select id="Date">
<option value="date">Date</option>
<option value="startTime">Start Time</option>
<option value="endTime">End Time</option>
<option value="subject">Subject</option>
<option value="venue">Venue</option>
<option value="priority">Priority</option>
</select>
</td>
</tr>
<hr>Search Results
<div>
<table align="center" width="80%" height="150px" cellpadding="1px" cellspacing="1px" border="1" id="table1">
<thead>
<tr>
<th width="50">Date</th>
<th width="20">Start</th>
<th width="20">End</th>
<th width="75">Subject</th>
<th width="60">Venue</th>
<th width="5">Priority</th>
</tr>
</thead>
<tbody id="sResultTable"> </tbody>
</table>
</div>
</hr>
</table>
</form>
</body>
</html>【问题讨论】：
-
请您修复示例中的语法错误？
-
定义“无法显示”。不相关，但这里似乎有很多代码用于此功能。
-
@Dave Newton 它是一个更大项目的一部分抱歉，这只是一小部分，因此所有其他代码哈哈。我在尝试显示搜索结果时遇到问题
-
@evolutionxbox 对不起，现在完成
-
我是说这里有很多不必要的代码可以在不改变功能的情况下被删除。重复您在显示搜索结果时遇到问题并没有帮助；重点是描述应该发生的事情、正在发生的事情等，如如何询问页面中所述。
标签： javascript html arrays sorting search