个人中心
gpt4 book ai didi

javascript - 如何创建类似 codelabs.developers.google.com 的搜索框？

转载 作者：塔克拉玛干 更新时间：2023-11-02 20:31:09 26 4
gpt4 key购买 nike

我使用的是 Polymer 1.8(初学者工具包模板)。我想知道如何创建搜索过滤器自定义元素，如 https://codelabs.developers.google.com/ 中的元素

理想的结果:

如您所见，它过滤掉了它下面的卡片，每次在搜索栏中键入击键，只留下包含所需搜索词的卡片。

我希望它能在两者中找到单词:

  • 标题 <paper-card> (heading 中的文字)
  • 并在内部divs (描述 <paper-card> )

我找到的搜索框的唯一示例是 this page从 2015 年和 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>

附言

我知道这是一个复杂的问题。一旦我得到 75 个代表，我就会为这个问题分配 50 的赏金，谁提供了有效的解决方案，谁就会得到它。

最佳答案

我认为这是关于操纵数据。我怀疑您是否想要手动创建所有这些 <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>

关于javascript - 如何创建类似 codelabs.developers.google.com 的搜索框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42456515/

26 4 0
文章推荐： android - 如何从编辑文本中删除字符？
文章推荐： javascript - 使用 Plotly.js 自定义垂直线
文章推荐： ios - 将数据从 TableView 单元格传递到新的 View Controller 错误
文章推荐： java - Android googleMap map 不显示，只有网格，有时
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com