Skip to content

Commit 99ace5f

Browse files
vpatrinhanivpatrinhani
committed
auto complete chip implementation
1 parent a9264c1 commit 99ace5f

File tree

5 files changed

+642
-435
lines changed

5 files changed

+642
-435
lines changed

‎demo/index.html‎

Lines changed: 208 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,208 @@
1-
<!doctype html>
2-
<!--
3-
@license
4-
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5-
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6-
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7-
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8-
Code distributed by Google as part of the polymer project is also
9-
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-
-->
11-
<html>
12-
<head>
13-
<meta charset="utf-8">
14-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15-
<title>paper-input-autocomplete-chips Demo</title>
16-
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17-
<link rel="import" href="../../paper-material/paper-material.html">
18-
<link rel="import" href="../../iron-icons/iron-icons.html">
19-
<link rel="import" href="../paper-chip.html">
20-
<link rel="import" href="../paper-input-autocomplete.html">
21-
<link rel="import" href="../paper-input-autocomplete-chips.html">
22-
</head>
23-
<style>
24-
25-
body {
26-
background-color: darkgrey;
27-
}
28-
29-
paper-material.demo-paper {
30-
width: 400px;
31-
background-color: white;
32-
padding: 24px;
33-
margin: 24px;
34-
}
35-
36-
</style>
37-
<body unresolved>
38-
39-
<template is="dom-bind" id="app">
40-
<paper-material class="demo-paper">
41-
<p>An example of <code>&lt;paper-input-autocomplete-chips&gt;</code>:</p>
42-
43-
<paper-input-autocomplete-chips local-candidates="{{states}}" label="Chips">
44-
<!--<iron-icon icon="visibility" prefix></iron-icon>
45-
<iron-icon icon="visibility" suffix></iron-icon>-->
46-
</paper-input-autocomplete-chips>
47-
48-
</paper-material>
49-
50-
<paper-material class="demo-paper">
51-
<p>An example of <code>&lt;paper-input-autocomplete&gt;</code>:</p>
52-
53-
<paper-input-autocomplete max-suggestions="3" local-candidates="{{states}}" placeholder="US states">
54-
</paper-input-autocomplete>
55-
56-
<paper-input label="Teste">
57-
<iron-icon icon="visibility" prefix></iron-icon>
58-
</paper-input>
59-
60-
</paper-material>
61-
62-
<paper-material class="demo-paper">
63-
<p>An example of <code>&lt;paper-chip&gt;</code>:</p>
64-
65-
<paper-chip label="Jane Doe" style="display: block;" removable openable>
66-
<div class="icon">J</div>
67-
<h1>[email protected]</h1>
68-
</paper-chip>
69-
70-
<paper-chip label="Jane Doe" style="display: block;" removable openable animated>
71-
<div class="icon">J</div>
72-
<h1>[email protected]</h1>
73-
</paper-chip>
74-
75-
</paper-material>
76-
77-
<paper-material class="demo-paper" style="height: 300px; overflow: auto;">
78-
<p>An example of <code>&lt;paper-input-autocomplete-chips&gt;</code>:</p>
79-
80-
<paper-input-autocomplete-chips local-candidates="{{states}}" label="Chips">
81-
<!--<iron-icon icon="visibility" prefix></iron-icon>
82-
<iron-icon icon="visibility" suffix></iron-icon>-->
83-
</paper-input-autocomplete-chips>
84-
85-
</paper-material>
86-
87-
<script>
88-
window.addEventListener('WebComponentsReady', function() {
89-
90-
var app = document.querySelector('#app');
91-
92-
app.states = [
93-
"Alabama",
94-
"Alaska",
95-
"American Samoa",
96-
"Arizona",
97-
"Arkansas",
98-
"California",
99-
"Colorado",
100-
"Connecticut",
101-
"Delaware",
102-
"District Of Columbia",
103-
"Federated States Of Micronesia",
104-
"Florida",
105-
"Georgia",
106-
"Guam",
107-
"Hawaii",
108-
"Idaho",
109-
"Illinois",
110-
"Indiana",
111-
"Iowa",
112-
"Kansas",
113-
"Kentucky",
114-
"Louisiana",
115-
"Maine",
116-
"Marshall Islands",
117-
"Maryland",
118-
"Massachusetts",
119-
"Michigan",
120-
"Minnesota",
121-
"Mississippi",
122-
"Missouri",
123-
"Montana",
124-
"Nebraska",
125-
"Nevada",
126-
"New Hampshire",
127-
"New Jersey",
128-
"New Mexico",
129-
"New York",
130-
"North Carolina",
131-
"North Dakota",
132-
"Northern Mariana Islands",
133-
"Ohio",
134-
"Oklahoma",
135-
"Oregon",
136-
"Palau",
137-
"Pennsylvania",
138-
"Puerto Rico",
139-
"Rhode Island",
140-
"South Carolina",
141-
"South Dakota",
142-
"Tennessee",
143-
"Texas",
144-
"Utah",
145-
"Vermont",
146-
"Virgin Islands",
147-
"Virginia",
148-
"Washington",
149-
"West Virginia",
150-
"Wisconsin",
151-
"Wyoming"
152-
];
153-
});
154-
</script>
155-
</template>
156-
</body>
157-
</html>
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<html>
12+
<head>
13+
<meta charset="utf-8">
14+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15+
<title>paper-input-autocomplete-chips Demo</title>
16+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17+
<link rel="import" href="../../paper-button/paper-button.html">
18+
<link rel="import" href="../../paper-material/paper-material.html">
19+
<link rel="import" href="../../iron-icons/iron-icons.html">
20+
<link rel="import" href="../paper-chip.html">
21+
<link rel="import" href="../paper-input-autocomplete.html">
22+
<link rel="import" href="../paper-input-autocomplete-chips.html">
23+
</head>
24+
<style>
25+
26+
body {
27+
background-color: darkgrey;
28+
}
29+
30+
paper-material.demo-paper {
31+
width: 400px;
32+
background-color: white;
33+
padding: 24px;
34+
margin: 24px;
35+
}
36+
37+
paper-chip[data-tag='read-only'] #chip {
38+
background-color: #FFB74D;
39+
}
40+
41+
</style>
42+
<body unresolved>
43+
44+
<template is="dom-bind" id="app">
45+
<paper-material class="demo-paper">
46+
<p>An example of <code>&lt;paper-input-autocomplete-chips&gt;</code>:</p>
47+
48+
<paper-button on-tap="onSetDefaultValue" raised>Set default value</paper-button>
49+
50+
<paper-input-autocomplete-chips id="myAutoComplete" local-candidates="{{states}}" label="Chips">
51+
<!--<iron-icon icon="visibility" prefix></iron-icon>
52+
<iron-icon icon="visibility" suffix></iron-icon>-->
53+
</paper-input-autocomplete-chips>
54+
55+
</paper-material>
56+
57+
<paper-material class="demo-paper">
58+
<p>An example of <code>&lt;paper-input-autocomplete&gt;</code>:</p>
59+
60+
<paper-input-autocomplete max-suggestions="3" local-candidates="{{states}}" placeholder="US states">
61+
</paper-input-autocomplete>
62+
63+
<paper-input label="Teste">
64+
<iron-icon icon="visibility" prefix></iron-icon>
65+
</paper-input>
66+
67+
</paper-material>
68+
69+
<paper-material class="demo-paper">
70+
<p>An example of <code>&lt;paper-chip&gt;</code>:</p>
71+
72+
<paper-chip label="Jane Doe" style="display: block;" removable openable>
73+
<div class="icon">J</div>
74+
<h1>[email protected]</h1>
75+
</paper-chip>
76+
77+
<paper-chip label="Jane Doe" style="display: block;" removable openable animated>
78+
<div class="icon">J</div>
79+
<h1>[email protected]</h1>
80+
</paper-chip>
81+
82+
</paper-material>
83+
84+
<paper-material class="demo-paper" style="height: 300px; overflow: auto;">
85+
<p>An example of <code>&lt;paper-input-autocomplete-chips&gt;</code>:</p>
86+
87+
<paper-input-autocomplete-chips local-candidates="{{states}}" label="Chips">
88+
<!--<iron-icon icon="visibility" prefix></iron-icon>
89+
<iron-icon icon="visibility" suffix></iron-icon>-->
90+
</paper-input-autocomplete-chips>
91+
92+
</paper-material>
93+
94+
<script>
95+
window.addEventListener('WebComponentsReady', function() {
96+
97+
var app = document.querySelector('#app');
98+
99+
app.onSetDefaultValue = function () {
100+
document.getElementById('myAutoComplete').selectedObject = app.states[0];
101+
};
102+
103+
app.states = [
104+
{
105+
key: 1,
106+
text: "Alabama",
107+
imgUrl: 'https://lh5.googleusercontent.com/-tlQ1LE9IdgI/AAAAAAAAAAI/AAAAAAAAAAA/xTWfNFP8w_M/s32-c-mo/photo.jpg',
108+
tag: 'read-only',
109+
readOnly: true
110+
},
111+
{
112+
key: 2,
113+
text: "Alaska",
114+
imgUrl: 'http://lorempixel.com/256/256/'
115+
},
116+
{
117+
key: 3,
118+
text: "American Samoa",
119+
imgUrl: 'http://lorempixel.com/200/200/sports/1/'
120+
},
121+
{
122+
key: 4,
123+
text: "Arizona",
124+
imgUrl: 'http://lorempixel.com/256/256/'
125+
},
126+
{
127+
key: 5,
128+
text: "Arkansas",
129+
imgUrl: null
130+
},
131+
{
132+
key: 6,
133+
text: "California",
134+
imgUrl: 'http://lorempixel.com/256/256/'
135+
},
136+
{
137+
key: 7,
138+
text: "Colorado",
139+
imgUrl: null
140+
}
141+
];
142+
//
143+
// app.states = [
144+
// "Alabama",
145+
// "Alaska",
146+
// "American Samoa",
147+
// "Arizona",
148+
// "Arkansas",
149+
// "California",
150+
// "Colorado",
151+
// "Connecticut",
152+
// "Delaware",
153+
// "District Of Columbia",
154+
// "Federated States Of Micronesia",
155+
// "Florida",
156+
// "Georgia",
157+
// "Guam",
158+
// "Hawaii",
159+
// "Idaho",
160+
// "Illinois",
161+
// "Indiana",
162+
// "Iowa",
163+
// "Kansas",
164+
// "Kentucky",
165+
// "Louisiana",
166+
// "Maine",
167+
// "Marshall Islands",
168+
// "Maryland",
169+
// "Massachusetts",
170+
// "Michigan",
171+
// "Minnesota",
172+
// "Mississippi",
173+
// "Missouri",
174+
// "Montana",
175+
// "Nebraska",
176+
// "Nevada",
177+
// "New Hampshire",
178+
// "New Jersey",
179+
// "New Mexico",
180+
// "New York",
181+
// "North Carolina",
182+
// "North Dakota",
183+
// "Northern Mariana Islands",
184+
// "Ohio",
185+
// "Oklahoma",
186+
// "Oregon",
187+
// "Palau",
188+
// "Pennsylvania",
189+
// "Puerto Rico",
190+
// "Rhode Island",
191+
// "South Carolina",
192+
// "South Dakota",
193+
// "Tennessee",
194+
// "Texas",
195+
// "Utah",
196+
// "Vermont",
197+
// "Virgin Islands",
198+
// "Virginia",
199+
// "Washington",
200+
// "West Virginia",
201+
// "Wisconsin",
202+
// "Wyoming"
203+
// ];
204+
});
205+
</script>
206+
</template>
207+
</body>
208+
</html>

0 commit comments

Comments
 (0)