CODEWITHSUNDEEP
javascripthtmlsearch
Laurus
Laurus

Reputation: 31

Setting up a search function on a webpage

Right, so I've managed to cobble together something that sort of works in terms of a search function within my webpage, however say I search for "Amethyst" it'll group "Placeholder1" into the search as well.

There's probably something very obvious that I'm missing here, but I'll put a small snippet of the code here, not enough to re-create but it's fairly straight forward.

var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);

function myFunction(e) {
  var filter = e.target.value.toUpperCase();

  var list = document.getElementById("products");
  var divs = list.getElementsByTagName("div");
  for (var i = 0; i < divs.length; i++) {
    var a = divs[i].getElementsByTagName("a")[0];

    if (a) {
      if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        divs[i].style.display = "";
      } else {
        divs[i].style.display = "none";
      }
    }
  }

}
<input type="text" id="myInput" placeholder="Search" onkeyup="myFunction()" style="font-size:20px; padding-left: 15px;">



<div id="products" class=" w3-row w3-grayscale" style="width:100%">
      
 <div class="w3-col l3 s6">
       <a href="#"><div class="w3-container">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
          </div>
        </div>
        <p>Amethyst<br>£45.00</p>
      </div></a>
     
      <a href="#"><div class="w3-container">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder1<br>£0.00</p>
      </div></a>
</div>

NOTE: This is not enough code to replicate anything, but I'm fairly certain the problem lies within this code.

If there's anything else you'd need to help that I've omitted then please let me know. Thanks!

Upvotes: 1

Views: 517

Answers (1)

Matthew M.
Matthew M.

Reputation: 1107

The main issue here is that you're attempting to get the value of e.target.value.toUpperCase(), which is undefined. What you actually want is the uppercased value of myInput, since that's what you'll want to find in your HTML content.

Here's a refactor of your script using querySelector with your existing HTML content that will work (and a more efficient for loop). This code will only look at the paragraph tag that contains your description.

<script>
var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);

function myFunction() {

  var filter = document.getElementById("myInput").value.toUpperCase();
  
  var paragraphs = document.querySelectorAll("#products div a p")
  
  for (let i=0, p; p = paragraphs[i]; i++)
  {
     if (p.innerHTML.toUpperCase().indexOf(filter) > -1)
     {
        p.parentElement.parentElement.style.display = "block";
    }
    else
    {
        p.parentElement.parentElement.style.display = "none";
    }
  }
}
</script>

Upvotes: 1

Related Questions