core-list

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
  <title>Polymer</title>
  <link rel='stylesheet' href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold&amp;lang=en'>
  <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
  <link href="https://www.polymer-project.org/0.5/components/polymer/polymer.html" rel="import" />
  <link href="https://www.polymer-project.org/0.5/components/core-elements/core-elements.html" rel="import" />
  <link href="https://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html" rel="import" />
  
  <style shim-shadowdom>
    body {
      font-family: 'RobotoDraft', sans-serif;
    }
    : unresolved {
      display: flex;
      justify-content: flex-start;
      background: rgba(255, 255, 255, 0.5);
      border: 1px dashed #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }
    : unresolved: after {
      padding: 15px;
      content: 'loading...';
      color: #ccc;
    }
  </style>
</head>

<body fullbleed>

  <polymer-element name="acp-search">

    <template>

      <style>
        .selected {
          background: silver;
        }
      </style>

      <core-list fit class="content" data="{{data}}" height="10px">
        <template>
          <div class="item {{ {selected: selected} | tokenList }}">
            {{model.name}}
          </div>
        </template>
      </core-list>

    </template>

    <script>
      Polymer({

        data: [],

        generateString: function(c) {
          var s = '';
          for (var i = 0; i < c; i++) {
            s += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
          }
          return s;
        },

        generateName: function(inMin, inMax) {
          return this.generateString(Math.floor(Math.random() * (inMax - inMin + 1) + inMin));
        },

        generateData: function(c) {
          var names = []

          for (var i = 0; i < c; i++) {
            names.push(this.generateName(4, 8));
          }
          names.sort();

          for (i = 0; i < c; i++) {
            this.data.push({
              name: names[i],
            });
          }

        },

        ready: function() {

          this.generateData(1000)

        }

      })
    </script>

  </polymer-element>

  <acp-search fit layout vertical></acp-search>

</body>

</html>