I am unsure why the search results are not displaying as innerHTML text on website. I have been working on this script for a while.
Data is stored as a constant:
<script>
const srcData = [
{
"ReportNum": "ABC-001",
"PrimaryAuthor": "Doe",
"FirstName": "John",
"PrimaryAuthoremail": "[email protected]",
"title": "Example Title",
"PrimaryUser": "People",
"ResearchTheme": "Environmental",
"Habitat1": "Habitat",
"Purpose1": "Assessment",
"Notes": "awaiting reply",
"Link": "https://www.website.org/report.pdf"
},
]
Script associated with running the search:
//Keyup used to automate all searches done in background
document.getElementById('searchfield').addEventListener('keyup', function(){
let pattern = new RegExp(this.value, 'i');
let searchterm2 = document.getElementById('searchterm').value
if(searchterm2 = 1) {
//let results = document.getElementById('resultSet1');
let resultSet = srcData.filter(item => item.ReportNum.match(pattern) && this.value != '').map(item => `<a href="${item.Link}">${item.title}</a>`).join(', ');
}
else if(searchterm2 = 2) {
//const results = document.getElementById('resultSet2');
let resultSet = srcData.filter(item => item.title.match(pattern) && this.value != '').map(item => `<a href="${item.Link}">${item.title}</a>`).join(', ');
}
else if(searchterm2 = 3) {
//const results = document.getElementById('resultSet3');
let resultSet = srcData.filter(item => item.PrimaryAuthor.match(pattern) && this.value != '').map(item => `<a href="${item.Link}">${item.title}</a>`).join(', ');
}
else if(searchterm2 = 4) {
//const results = document.getElementById('resultSet4');
let resultSet = srcData.filter(item => item.ResearchTheme.match(pattern) && this.value != '').map(item => `<a href="${item.Link}">${item.title}</a>`).join(', ');
}
else if(searchterm2 = 5) {
//const results = document.getElementById('resultSet5');
let resultSet = srcData.filter(item => item.Habitat1.match(pattern) && this.value != '').map(item => `<a href="${item.Link}">${item.title}</a>`).join(', ');
}
else {
//const results = document.getElementById('resultSet6');
let resultSet = srcData.filter(item => item.Purpose1.match(pattern) && this.value != '').map(item => `<a href="${item.Link}">${item.title}</a>`).join(', ');
}
document.getElementById('searchresult').innerHTML = resultSet;
)};
</script>
Displaying the user interface search bar and results:
<html><div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Type to search reports</span>
<input type="text" placeholder="Report Search" id="searchfield"></input></div>
<div class="input-group-prepend">
<span class="input-group-text">Select search term</span>
<select class="form-control" id="searchterm">
<option value = 1 >Report Number</option>
<option value = 2 >Report Title</option>
<option value = 3 >Primary Author Last Name</option>
<option value = 4 >Research Theme</option>
<option value = 5 >Primary Habitat</option>
<option value = 6 >Primary Report Purpose</option>
</select>
</div></div>
<div id="searchresult"></div></html>
Code does not display “searchresult” term as innerHTML.