Question 55690 in Html Question posted in
Some basic documentation can be found here.

How to display HTML search results?

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.

Tags:

2

Answers


  1. 0

    Since you didn’t mention what is actually rendered I am assuming nothing or undefined. I am also assuming that there’s no actual error as you are not mentioning it in the question (therefore the filter functions actually work).

    There are two problems with your code. One logical and the other one is related to syntax.

    The problem #1 is related to the condition in the if statement.

    if(searchterm2 = 1) {
  // This is ALWAYS executed.
}

    You use assignment instead of comparison in the condition. You should have used the === to compare the value. Since the value of an input is always a string then the correct syntax should be:

    if (searchterm2 === '1') {
  ...
}

    Now, this will be executed only when the value of the #searchterm input is 1.

    The problem #2 is with the scope of the resultSet property. Since you declare them (correctly) with the let keyword the scope of the declaration is different than the var keyword.

    Example of incorrect use:

    {
  let var1 = 'test';
  console.log(var1);
}
console.log(var1);

    This will output:

    > test
> undefined

    It’s because the var1 variable is scoped only to the inside of brackets. When the program exit the brackets the variable is destroyed and no longer visible.

    You have made the same issue. The resultSet in each else/if statement is created and immediately destroyed. What you can do is to declare an uninitialized variable above the else/if block and initialize the variable in one of the if statements.

    let resultSet;

if (searchterm2 === '1') {
  resultSet = srcData.filter(item => item.ReportNum.match(pattern) && this.value != '').map(item => `<a href="${item.Link}">${item.title}</a>`).join(', ');
} 
...
    Login or Signup to reply.
  2. 0

    As pawel said, the problem is in the scope of vaiable

     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"
    },
    ]
//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;
    let resultSet;
  if(searchterm2 = 1) {
    //let results = document.getElementById('resultSet1');
     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');
     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');
     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');
     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');
     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');
     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;
});
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search