<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>