How to create a filter to search text, rather than <div> and <img> element?

Question

I am using w3.js, the filter function to make product filtering.

Here is the search bar for the user to type something to filter products:

<label id="search"><input oninput="w3.filterHTML('#listProductWrapper', '.product', this.value);" placeholder="Search Here..." lang="en" id="querySearch"></label>

This is what I want to show the product name and image:

<div id="listProductWrapper">
    <div class="product"><div class="productImg" id="productImg01"></div><div class="productText">a1</div></div>
    <div class="product"><div class="productImg" id="productImg02"></div><div class="productText">a2</div></div>
    <div class="product"><div class="productImg" id="productImg03"></div><div class="productText">b1</div></div>
</div>

But when I type the elements include " <div class="productImg" id="productImg01"></div><div class="productText"> ", also can search. Such as I type "img", these three product also show there. I hope to make just "a1", "a2" and "b1" (the productText to make search able).

Or anybody can make another filter function without using w3.js?

Update: w3.js filter function is below:

w3.filterHTML = function(id, sel, filter) {
  var a, b, c, i, ii, iii, hit;
  a = w3.getElements(id);
  for (i = 0; i < a.length; i++) {
    b = w3.getElements(sel);
    for (ii = 0; ii < b.length; ii++) {
      hit = 0;
      if (b[ii].innerHTML.toUpperCase().indexOf(filter.toUpperCase()) > -1) {
        hit = 1;
      }
      c = b[ii].getElementsByTagName("*");
      for (iii = 0; iii < c.length; iii++) {
        if (c[iii].innerHTML.toUpperCase().indexOf(filter.toUpperCase()) > -1) {
          hit = 1;
        }
      }
      if (hit == 1) {
        b[ii].style.display = "";
      } else {
        b[ii].style.display = "none";
      }
    }
  }
};

Answer 1

以仅匹配文本， .innerText .innerHTML更改为.innerText