blob: 52512a34ff6f9f96ed31d05411f0448643971f87 [file] [log] [blame]
<html>
<head>
<title>autocomplete-input-sk demo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="/res/common/js/common.js"></script>
<script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="autocomplete-input-sk.html">
</head>
<body>
<dom-module id="autocomplete-input-demo">
<template>
<autocomplete-input-sk
id="input"
label="US States"
value="{{value}}"
autocomplete="[[autocomplete]]"
on-change="_change"
></autocomplete-input-sk>
<autocomplete-input-sk
id="input2"
label="US States (with focus)"
value="{{value2}}"
autocomplete="[[autocomplete]]"
on-change="_change2"
display-options-on-focus="true"
accept-custom-value="true"
></autocomplete-input-sk>
</template>
<script>
Polymer({
is: 'autocomplete-input-demo',
properties: {
autocomplete: {
type: Array,
value: function() {
return [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming",
];
},
},
value: {
type: String,
},
value2: {
type: String,
},
},
_change: function() {
console.log("on-change fired in 1st element: " + this.value);
},
_change2: function() {
console.log("on-change fired in 2nd element: " + this.value2);
},
});
</script>
</dom-module>
<h1>autocomplete-input-sk demo</h1>
<autocomplete-input-demo></autocomplete-input-demo>
</body>
</html>