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查询/更改DOM，因为人们可能不知道另一个对DOM所做的更改。在您的情况下，您应该使用Polymer's DOM manipulation API而不是JQuery查询选择器。此外，如果您只想根据输入的搜索值隐藏/取消隐藏元素，则可以在元素上调用setAttribute('hidden','')和removeAttribute('hidden')。如果您想更多地使用特定的CSS类，可以在元素的classList属性中添加/删除一个类，然后调用element。 <{3}}（仅限元素）或Polymer.updateStyles()（整页），以便应用更改。

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

1 个答案: