如何使用 Google Polymer 实现对 paper-cards 的简单搜索

Question

如果您要使用 <paper-card> 等组件在 google 聚合物库上构建一个简单的站点，您将如何通过它们实现搜索？ 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 query/alter DOM，因为人们可能不知道 DOM 所做的更改另一个。在您的情况下，您应该使用 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()（仅元素）或 Polymer.updateStyles()（整个页面）来应用更改。

如何使用 Google Polymer 实现对 paper-cards 的简单搜索

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

javascript

search

web-component

polymer

polymer-1.0