如何在codelabs.developers.google.com上创建搜索框？

时间：2017-02-25 13:12:55

标签： javascript polymer polymer-1.0 web-component custom-element

我正在使用Polymer 1.8（入门套件模板）。我想知道如何创建像https://codelabs.developers.google.com/

中的搜索过滤器自定义元素

理想的结果：

正如您所看到的，它会过滤掉其下方的卡片，每次击键都会在搜索栏中输入，只留下包含所需搜索词的卡片。

我希望它能找到两者中的单词：

  • <paper-card>的标题（heading）
    • 中的文字
  • 和内部divs（<paper-card>的说明）

我找到的搜索框的唯一示例是2015年的this page和this page of the Polymer Element Catalog，它使用了类似的搜索框，但我无法将其调整为我的自定义元素。

这是my-preview-cards自定义元素：

它包含卡片本身：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-preview-cards">
  <template>
    <style>
      /* local DOM styles go here */
      :host {
        display: inline-block;
      }
    </style>

    <div>
      <paper-card heading="Color picture" image="http://lorempixel.com/300/200">
        <div class="card-content">An RGB picture</div>
        <div class="card-actions">
          <paper-button>Button</paper-button>
        </div>
      </paper-card>

      <paper-card heading="Grey image" image="http://lorempixel.com/g/300/200">
        <div class="card-content">That's a grey picture</div>
        <div class="card-actions">
          <paper-button>Button</paper-button>
        </div>
      </paper-card>
    </div>

  </template>
  <script>
    Polymer({
      is: 'my-preview-cards',
    });
  </script>
</dom-module>

我为搜索栏创建了一个单独的自定义元素my-search-bar：

它包含搜索栏：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-search-bar">
  <template>
    <style>
      /* local DOM styles go here */
      :host {
        display: inline-block;
      }
    </style>

    <form on-submit="performSearch" class="flex">
      <paper-input id="query" value="{{query::keyup}}" type="search" placeholder="search"></paper-input>
   </form>

  </template>
  <script>
    Polymer({
      is: 'my-search-bar',
    });
  </script>
</dom-module>

这两个自定义元素都显示在my-homepage上：

<div>
  <my-search-bar></my-search-bar>
</div>

<div>...</div>

<div>
  <my-preview-cards></my-preview-cards>
</div>

P.S。

我知道这是一个复杂的问题。一旦我得到75个代表，我将为此问题分配50的赏金，并且提供工作解决方案的任何人都可以获得它。

1 个答案:

答案 0 :(得分：5)

我认为这是关于操纵数据的。如果您有这么多数据，我怀疑您是否想要手动创建所有这些<paper-card>，因此我建议您使用<dom-repeat>并从Array过滤数据。您可以看到示例演示here。

.search-box {
  display: flex;
  display: -webkit-flex;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  height: 40px;
  width: 100%;
  align-items: center;
}

.search-box iron-icon {
  color: var(--google-grey-700);
  fill: var(--google-grey-700);
  margin-left: auto;
  right: 0;
}

.search-box input {
  font-size: 20px;
  outline: 0;
  border: none;
  padding-left: 10px;
  width: 86%;
}

.search-box {
  @apply(--layout-flex);
  @apply(--layout-center);
  @apply(--layout-horizontal);
}

.search-box input {
  @apply(--layout-flex);
}
<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="polymer-search">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Polymer Search</title>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <link rel="import" href="iron-icon/iron-icon.html">
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="iron-icons/av-icons.html">
  <link rel="import" href="paper-toolbar/paper-toolbar.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>

<body>
  <dom-module id="my-app">
    <template>
      <style>
          ul {
            padding:20px 10px;
            list-style: none;
            display:flex;
            flex-flow:row;
            justify-content:space-between;
          }
          .item {
            width:25%;
            background-color: whitesmoke;
            padding:5px;
            margin:5px;
            display:flex;
            flex-flow:column;
          }
      </style>
      
      <paper-toolbar>
        <div class="search-box bottom">
          <input id="search" />
          <iron-icon icon="av:mic"></iron-icon>
        </div>
      </paper-toolbar>
      <ul>
        <template is="dom-repeat" items="[[data]]">
          <li class="item">
            <span>[[item.title]]</span>
            <p>[[item.description]]</p>
          </li>
        </template>

    </ul>
    </template>
    <script>
      Polymer({
        is: 'my-app',
        properties: {
          defaultData: {
            type: Array,
            value: [{
                title: 'Color picture',
                description: 'An RGB picture'
              },
              {
                title: 'Grey image',
                description: 'That\'s a grey picture'
              },
              {
                title: '3',
                description: 'this is content 3'
              }
            ]
          },
          data: {
            type: Array
          }
        },
        ready: function() {
          this.data = this.defaultData;
          this.$.search.addEventListener('keyup', this.searchChanged.bind(this));
        },
        searchChanged: function(e) {
          var querySearch = this.$.search.value.toLowerCase();
          if (querySearch == '') {
            this.data = this.defaultData;
          } else {
            this.data = this.defaultData.filter(function(item) {
              return item.title.toLowerCase().indexOf(querySearch) !== -1 || item.description.toLowerCase().indexOf(querySearch) !== -1;
            });
          }
        }
      })
    </script>
  </dom-module>
  <my-app></my-app>
</body>

</html>

相关问题
最新问题