All geek questions in one place

How to create a search box, for example, at codelabs.developers.google.com?

I am using Polymer 1.8 (a starter template). I want to know how to create a custom search filter element, for example at https://codelabs.developers.google.com/

Desired Result:

As you can see, it filters out the cards below it, with each keystroke typed in the search bar, leaving only the cards containing the desired search words.

I would like to find words in both:

  • heading <paper-card>(text in heading)
  • and in internal divs(description <paper-card>)

The only examples of the search box found are this page from 2015 and on this page the Polymer Elements Catalog , which uses a similar search box, but I could not adapt them to my custom elements.

Here's the my-preview-cardscustom element:

It contains the cards themselves:

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

I created a separate user element my-search-barfor the search bar:

It contains a search string:

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

Both custom items are displayed on my-homepageas:

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

<div>...</div>

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

PS

I understand that this is a difficult question. As soon as I get 75 repressions, I will assign 50 points to this question, and those who provide a working solution will receive it.

+4
1

. , <paper-card>, , <dom-repeat> Array. demo .

.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\ 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>
+5

Source: https://habr.com/ru/post/1670824/

More articles:


All Articles