paper-checklist.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">


<dom-module id="paper-checklist">
  <template>
    <paper-input id="checklist-input" on-keyup="filterList" label="Type to search"></paper-input>
    
    <paper-menu id="checklist-menu">
      <template is="dom-repeat" items="{{checklistData}}">
        <paper-item role="menuitemcheckbox"><paper-checkbox></paper-checkbox><paper-item-body>{{item}}</paper-item-body></paper-item>
      </template>
    </paper-menu>
  </template>
  
  <script>
    var importDoc = document.currentScript.ownerDocument;
    if(!importDoc) {
      importDoc = document.currentScript._ownerDocument;
    }

    Polymer({
      is: "paper-checklist",
      
      properties: {
        checklistData : {
          type: Array,
          value: []
        }
      },
      
      filterList: function(e) {
        var inputStr = this.$['checklist-input'].value;
        
        var menuItems = this.$['checklist-menu'].querySelectorAll('paper-item');
        
        for(var i = 0; i < menuItems.length; i++) {
          menuItems[i].style.display = 'none';
          if(menuItems[i].querySelector('paper-item-body').innerHTML.toLowerCase().indexOf(inputStr.toLowerCase()) !== -1) {
            menuItems[i].style.display = '';
          }
        }
      },
      
      ready: function() {
        var userList = Polymer.dom(this).querySelectorAll('ul > li');
        var checklistData = [];
        for(var i = 0; i < userList.length; i++) {
          checklistData.push(userList[i].innerHTML);
        }

        this.checklistData = checklistData;
      }
    });
  </script>
  
</dom-module>