- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我使用的是 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/
有人可以解释为什么当我输入-99时,程序没有停止吗?当我第一次输入 -99 时,程序停止,但如果我先输入 1,然后第二次输入 -99,程序不会停止 import java.util.Scanner;
File Letter Counter 编写一个程序,要求用户输入文件名,然后要求用户输入一个字符。程序应该计算并显示该次数文件中出现指定字符。使用记事本或其他文本编辑器创建可用于测试程序的示例文件。
如何使我的输出符合预期?为了更清楚地说明,如何使输出“It·will·take9.090909090909091E-4·秒”与其他所有内容在同一行而不是新行? 预期输出: 输入以下其中一项:·空气、·
有人可以解释一下为什么我会遇到逻辑错误吗?输出应该是输入·运行者·1·姓名:·输入·运行者·1·时间(单位:分钟):·输入·运行者·2·姓名:·输入·运行者·2·时间·(单位·分钟):·输入·运行者·
我正在尝试使用 CodeLab 教程来添加 Chromecast 支持。我已经下载了这些文件,当我尝试将它们导入 Android Studio 时,我收到此错误: No toolchains foun
这个问题在这里已经有了答案: How do I merge two dictionaries in a single expression in Python? (43 个回答) 关闭 7 年前。
我正在尝试学习如何制作 Cast 功能,所以我开始了这个 Codelab 教程 https://codelabs.developers.google.com/codelabs/cast-videos-
在使用 Swift 构建适用于 iOS 的 Firebase 教程应用程序时,我在设置应用程序以允许用户发送图像消息的说明中停留在第 8 页。这可能是教程中显示的代码出错,或者我的框架未正确连接,但我
运行涵盖 FriendlyChat 的 Codelabs Firebase 教程。解决了持续存在的问题(在别处回答)但是当我去上传选定的图像时,我的应用程序崩溃了。我重新执行了所有步骤并测试了教程源代
同时根据这个 https://codelabs.developers.google.com/codelabs/flutter-firebase/#8 实现 Firebase for Flutter 我
我正在尝试开发一个类似于 Google CodeLabs 的教程站点. 我指的是this用于开发 CodeLabs 站点的文章。 有没有人尝试使用这个工具来托管他们自己的 CodeLabs 网站? 最
我已经尝试了很多次,重试并按照 Firebase Android Codelab 中的确切步骤进行操作。我正在尝试使用 Google 帐户登录,但由于某种原因未能成功。 SignInActivity.
我该如何解决这个错误?我对 Swift 开发还很陌生。 最佳答案 试试这个:let config = FIRRemoteCongig.remoteConfig() 关于ios - Firebase i
我正在研究使用 Google 电子钱包通过网络/jwt 界面存储条形码(用于电子处方,如果重要的话)的可行性。 https://codelabs.developers.google.com/add-t
我正在尝试将华为 map 套件用于不包含 Google Play 服务的新设备。 Codelab 演示位于: https://developer.huawei.com/consumer/en/code
我正在 https://bitbucket.org/webrtc/codelab/src/50a47bb092483fd7ca27998a365dff434919bf89?at=master 学习 c
我重新发布这个问题,因为我之前没有得到有效的解决方案。对带来的麻烦表示抱歉。我已经在 Heroku 上托管了 Codelab webrtc 演示教程第 6 步中所示的示例(使用 Node.js 进行信
我使用的是 Polymer 1.8(初学者工具包模板)。我想知道如何创建搜索过滤器自定义元素,如 https://codelabs.developers.google.com/ 中的元素 理想的结果:
flutter firebase 的代码实验室我已经完成了一半 应用程序加载正常,接受输入,然后加载 Google 登录选项(如果尚未登录则添加帐户)。在此之后,应用程序卡住。 下面是一些抛出异常的截
我听说有一个 Codelab 可以教你如何在 Dart 中使用 Web 组件?真的吗?如果是这样,如果我被卡住了怎么办? 最佳答案 是的!这是真的!我知道,因为我是写它的人! 以下是 Codelab
我是一名优秀的程序员,十分优秀!