如何使用Google Polymer实现纸卡的简单搜索

Question

如果您使用诸如<paper-card>类的组件在google polymer库上构建一个简单的网站，您将如何实现它们的搜索？ Google Keep是一个很好的例子。

如何将<paper-input>和<paper-button>与<paper-card>元素绑定，并隐藏标题和描述中不包含搜索词的元素？

例如，如果下面有这段代码

<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>

有没有办法使事情变得非常简单？ 如果有人对此有解决方案，非常感谢您在这里与我们分享。

搜索codepen.io之后，我找到了可以搜索和修改极简主义的代码。 这是下面的代码，但是我不能使它与<paper-cards> ，如果可以针对上述情况进行修改，则将有很大帮助。

的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

在Polymer中开发组件时，通常不赞成通过JQuery查询/更改DOM，因为一个人可能不知道另一个人对DOM所做的更改。 在您的情况下，您应该使用Polymer的DOM操作API而不是JQuery查询选择器。 此外，如果只想根据输入的搜索值隐藏/取消隐藏元素，则可以在元素上调用setAttribute('hidden','')和removeAttribute('hidden') 。 如果您想对特定的CSS类进行更多修改，可以在该元素的classList属性中添加/删除一个类，然后再调用element 。 updateStyles（） （仅限元素）或Polymer.updateStyles() （整个页面），以应用更改。