<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/polymer/polymer.html" />
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-dropdown-menu/paper-dropdown-menu.html" />
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-listbox/paper-listbox.html" />
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-item/paper-item.html" />
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-input/paper-input.html" />
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/web-animations.html" />
<link rel="import" href="my-page.html">
</head>
<body>
<my-page></my-page>
</body>
</html>
<dom-module id="my-page">
<template>
<style is="custom-style">
paper-input.search{
position: relative;top: -16px;left:0px;
--paper-input-container:{
margin: 0px 12px;
}
}
</style>
<paper-dropdown-menu label="I Like">
<paper-listbox slot="dropdown-content">
<paper-input class="search" label="Search" value="{{key}}"
on-tap="_stopEventPropagation"
on-keydown="_stopEventPropagation"
on-keyup="_stopEventPropagation"></paper-input>
<template is="dom-repeat" items="{{fruits}}" filter="{{onmatch(key)}}">
<paper-item data-value="{{item}}">{{item}}</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</template>
<script>
class MyPage extends Polymer.Element {
static get is() {
return "my-page";
}
static get properties(){
return{
fruits:{
type: Array,
value: ['Apples', 'Apricots', 'Avocados', 'Bananas', 'Cherries', 'Cucumbers',
'Dates', 'Fig', 'Grapefruit', 'Grapes', 'Guava', 'Jackfruit',
'Kiwi', 'Mango', 'Melon']
}
}
}
onmatch(key) {
if (!key) {
return null;
} else {
try {
key = key.toLowerCase();
} catch (err) {}
return function (item) {
var curr = item.toLowerCase();
if (curr.search(key) >= 0) {
return true;
}
};
}
}
_stopEventPropagation(e){
e.stopPropagation();
}
}
customElements.define(MyPage.is, MyPage);
</script>
</dom-module>