Can't filter right

Question

I was trying to do a filter/search with jquery, but my search isn't giving me the result i want. First of all this code uses twig to show the items from the database.

My problem is that, it's searching only for the line of the table row like e.g. If I search for the title, only the title will appear and none of the other information nor the image.

I want my output to be like my first print screen

---

view

<div class="expandedContent">
              <input type="text" id="search" placeholder="Search...">
                {% for item in processador %}

                <div class="product-removal"  >

                    <article class="product">
                        <header>
                            <img src="{{ item.img|e }}">
                        </header>
                        <div class="content" >
                            <button name="proc" id="{{ item.id|e }}" type="button"
                                    class="close close-processador pull-right" aria-label="Close"
                                    data-id="{{ item.id|e }}" data-preco="{{ item.preco_unit|e }}">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h1>{{ item.marca|e }}</h1>
                            {{ item.descr|e }}
                        </div>
                        <footer class="content">
                            <h2 class="full-price fixed fixed-processador">
                                {{ item.preco_unit|e }}€
                            </h2>
                            <a data-versao="{{item.versao|e}}" class="adicionar adicionar-processador pull-right full-price"
                               data-modelo="{{ item.modelo|e }}" data-id="{{ item.id|e }}"
                               data-preco="{{ item.preco_unit|e }}">
                                <h2 class="full-price">
                                    {{ item.preco_unit|e }}€
                                </h2>
                            </a>
                            <h2 class="price">
                                {{ item.preco_unit|e }}
                            </h2>
                        </footer>
                    </article>
                </div>

                {% endfor %}
                <button class="mostrar" data-estado="mostrar">mostrar</button>
    </div>

jquery

$(document).ready(function(){
      $("#search").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $(".product-removal *").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });

---

• First view of the code
• searching a "i"-gives me the title the info but not the image]
• searching "o" - gives only the info

Answer 1

You aren't using the function filter correctly . The function filter expect a selector or a function which returns a boolean. It will then reduce the result set by only returning the elements of which the function return true

If you want to use this function you would need to swap your code to something like this

$(document).ready(function() {
    $("#search").on("keyup", function() {
        var value = $(this).val().toLowerCase();
      $('div.product-removal article.product').toggle(true); //Show all products again
      $('div.product-removal article.product').filter(function(index, elem) {
          return $(this).html().toLowerCase().indexOf(value) == -1; //return true when the text is not found
      }).toggle(false); //filter will return all products which does not contain the search query
    });
});

---

But I'm feeling you would be more comfortable with the following aproach

$(document).ready(function() {
    $("#search").on("keyup", function() {
        var value = $(this).val().toLowerCase();
      $('div.product-removal article.product').each(function() {
          $(this).toggle($(this).html().toLowerCase().indexOf(value) > -1);
      });
    });
});

Also note I used the html property of the parent container article.product instead of each element seperatly so this code will return some false positives now and then