How to implement simple search for paper-cards using Google Polymer

Question

If you would have a simple site build on google polymer library using components like <paper-card> how would you implement search by them ? Google keep is the perfect example of it.

How to bind a <paper-input> and <paper-button> with <paper-card> elements and hide the elements that doesn't contain any of the words of the search in the title and the description?

For example, if we have this code down bellow

<paper-input name="search" label="search"></paper-input>
<paper-button onclick="search()">Submit</paper-button>

<paper-card heading="Card one title" image="/image1.jpg" elevation="1">
      <div class="card-content">
          Some words containing the word - one
      </div>                    
</paper-card>


<paper-card heading="Card two title" image="/image2.jpg" elevation="1">
      <div class="card-content">
          Some words containing the word - two
      </div>
</paper-card>

Is there a way to make it happen using something extremely simple? If someone have the solution for this, I would really appreciate if you share it here with us.

After searching the codepen.io I found the code that allows to search and modified it for the minimalism. Here's the code down bellow, but I couldn't make it work with the <paper-cards> , If you could modify it for the case shown above, you would help a lot.

HTML

<label for="search-text">Search the list</label>
<input type="text" id="search-text" placeholder="search" class="search-box">
    <span class="list-count"></span>


<ul id="list">
  <li class="in">Apple</li>
  <li class="in">Pumpkin</li>
  <li class="in">blackberry</li>

CSS

.hidden {
  display:none;
}

JS

$(document).ready(function() {

  var jobCount = $('#list .in').length;
  $('.list-count').text(jobCount + ' items');

  $("#search-text").keyup(function() {
    //$(this).addClass('hidden');

    var searchTerm = $("#search-text").val();
    var listItem = $('#list').children('li');

    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

    //extends :contains to be case insensitive
    $.extend($.expr[':'], {
      'containsi': function(elem, i, match, array) {
        return (elem.textContent || elem.innerText || '').toLowerCase()
          .indexOf((match[3] || "").toLowerCase()) >= 0;
      }
    });

    $("#list li").not(":containsi('" + searchSplit + "')").each(function(e) {
      $(this).addClass('hiding out').removeClass('in');
      setTimeout(function() {
        $('.out').addClass('hidden');
      }, 300);
    });

    $("#list li:containsi('" + searchSplit + "')").each(function(e) {
      $(this).removeClass('hidden out').addClass('in');
      setTimeout(function() {
        $('.in').removeClass('hiding');
      }, 1);
    });
  });
});

Answer 1

It's generally frowned upon to query/alter the DOM via JQuery when developing components in Polymer, because one may not be aware of changes to the DOM made by the other. In your case you should use Polymer's DOM manipulation API instead of the JQuery query selectors. Furthermore, if you only want to hide/unhide an element based on the search value entered, you could call setAttribute('hidden','') and removeAttribute('hidden') on the element. If you want to tinker more with specific CSS classes you could add/remove a class to the classList property on the element, followed by a call to element . updateStyles() (element only) or Polymer.updateStyles() (entire page) for the changes to apply.