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

如果您想在google polymer library上创建一个简单的站点，使用

之类的组件，您将如何通过它们实现搜索？ Google keep就是一个很好的例子

如何将

和

与

元素绑定，并隐藏标题和说明中不包含任何搜索词的元素

例如，如果我们有下面的代码

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

JS

.hidden {
  display:none;
}

$(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);
    });
  });
});

---

在Polymer中开发组件时，通常不赞成通过JQuery查询/更改DOM，因为一方可能不知道另一方对DOM所做的更改。在您的情况下，应该使用而不是JQuery查询选择器。此外，如果您只想根据输入的搜索值隐藏/取消隐藏元素，则可以对元素调用

setAttribute（'hidden'，''）

和

removeAttribute（'hidden'）

。如果您想进一步修改特定的CSS类，可以在元素的classList属性中添加/删除一个类，然后调用

element

。（仅限元素）或

Polymer.updateStyles（）

（整个页面）以应用更改。

在Polymer中开发组件时，通常不赞成通过JQuery查询/更改DOM，因为一方可能不知道另一方对DOM所做的更改。在您的情况下，应该使用而不是JQuery查询选择器。此外，如果您只想根据输入的搜索值隐藏/取消隐藏元素，则可以对元素调用

setAttribute（'hidden'，''）

和

removeAttribute（'hidden'）

。如果您想进一步修改特定的CSS类，可以在元素的classList属性中添加/删除一个类，然后调用

element

。（仅限元素）或

Polymer.updateStyles（）

（整页）以应用更改

$(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);
    });
  });
});