'Search/Filter functionality with JavaScript

I am new to JavaScript so trying have some code which contains python elements from for loop and I am trying to create a filter functionality with JavaScript:

Input:

  <div class="">
    <input class=""  type="text"  onkeyup= "myFunction()" spellcheck="false" id="search" name="search" placeholder="search fund with keyword">

    <button type="submit" >
      Search
    </button>
  </div>
</div>

Python code:

{% for fund in funds %}
<div id="fundName" >
  <div class="">
      <h1 class="">
        <a class = '' href="{{url_for('discovery_bp.funds', fund_id=fund['fund_id']) }}"> {{fund['fund_name']}}</a>
      </h1>
      <ul class="">
          <strong>Round title : TBC </strong>
            <li>Deadline : TBC</li>
        </ul>

    <p id="fundDescription" class="">  {{fund['fund_description']}}</p>

  <hr class="">
  {% endfor %}
</div>

It might sound like a silly question but very new to JavaScript world so wondering if this is correct since it is not doing anything when filtering?

Input:

<html lang="en" "><head>
  </head>

<div class=">
  <h1 class=""><label class="" for="weight">
     Fund search
    </label>
  </h1>
  <div class="">
    <input class="" type="text" onkeyup="myFunction()" spellcheck="false" id="search" name="search" placeholder="search fund with keyword">

    <button type="submit" class="">
      Search
    </button>
  </div>
</div>

Python iteration spits out data:

<div id="fundName" class="">
  <div class="">
      <h1 class="">
        <a href="/round/harry-s-breakfast-fund"> Harry's breakfast fund</a>
      </h1>
      <ul class="">
          <strong>Round title : TBC </strong>
            <li>Deadline : TBC</li>
        </ul>

    <p id="fundDescription" class="">  An example fund designed to supply.</p>

  <hr class="">
<div id="fundName" class="">
  <div class="">
      <h1 class="">
        <a class="" href="/round/ram-s-get-fit-feb-fund"> Ram's Get Fit Feb fund</a>
      </h1>
      <ul class="">
          <strong>Round title : TBC </strong>
            <li>Deadline : TBC</li>
        </ul>

    <p id="fundDescription" class="">  An example fund designed to supply.</p>

  <hr class="">
<div id="fundName" ">
  <div class="">
      <h1 class="">
        <a  href="/round/funding-service-design"> Funding Service Design</a>
      </h1>
      <ul class="">
          <strong>Round title : TBC </strong>
            <li>Deadline : TBC</li>
        </ul>

    <p id="fundDescription" class="">  An example fund for testing</p>

  <hr class="">
</div>

Function:

<script>


  function myFunction() {
      var input, filter, h1, div, a, p, txtValue;
      input = document.getElementById("search");
      filter = input.value.toLowerCase();
      div = document.getElementById("fundName");
      h1 = div.getElementsByTagName("h1");
      
      for (i = 0; i < h1.length; i++) {
          a = h1[i].getElementsByTagName("a")[0];
          txtValue = a.textContent || a.innerText;
          if (txtValue.toLowerCase().indexOf(filter) > -1) {
              h1[i].style.display = "";
          } else {
              h1[i].style.display = "none";
          }
      }
  }
  </script>

javascript

Solution 1:^[1]

Could be a whitespace in your content while using a.textContent, you should try trimming the content or simply use a.innerText. Also it seems like your filter is just hiding the heading and not the block of content which I believe might be your intention.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	VM1

'Search/Filter functionality with JavaScript

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]