Untitled

<!DOCTYPE html>
<html>

<head>
  <link rel="import" href="https://rawgit.com/Polymer/polymer/v1.2.2/polymer.html" />
  <script src="https://elements.polymer-project.org/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://elements.polymer-project.org/bower_components/iron-elements/iron-elements.html">

  <link rel="import" href="http://www.polymer-project.org/1.0/components/paper-input/paper-input.html">
  <link rel="import" href="http://www.polymer-project.org/1.0/components/paper-dropdown-menu/paper-dropdown-menu.html">
  <style>
    .taller {
      height: 120px;
    }

    [vertical-align="top"] ul {
      margin-top: 0;
    }

    [vertical-align="bottom"] ul {
      margin-bottom: 0;
    }

    button,
    paper-button {
      border: 1px solid #ccc;
      background-color: #eee;
      /*padding: 1em;*/
      border-radius: 3px;
      cursor: pointer;
    }

    button:focus {
      outline: none;
      border-color: blue;
    }
  </style>
</head>

<body>
  <dom-module id="employee-list">
    <template>
      <input type="text" id="searchEmp" placeholder="Search For employee" />
      <br/>
      <select>
        <option value="">Select Department</option>
        <option value="digital engamenet">Digital Engagement</option>
        <option value="shared research">Shared Research</option>
        <option value="research">Research</option>
      </select>
      <br/>
      <button onclick="javascript:searchData()">Search</button>
      <br/>
      <br/>
      <paper-listbox>
        <template is="dom-repeat" items="{{items}}">
          <div class="row">
            <div class="col-sm-12" style="font-size:15px;font-family:'Open Sans'">
              {{item.name}} - {{item.dept}}
            </div>
            <hr />
          </div>
        </template>
      </paper-listbox>
      <!-- would like this result show on another page on click of search -->
      <div class="search-result">
        <h3>Result</h3>
        <div id="result"></div>
      </div>
    </template>
    <script>
      Polymer({
        is: 'employee-list',
        properties: {
          items: {
            type: Array
          }
        },
        ready: function() {
          this.items = [{
            'name': 'Jack',
            'dept': 'Digital Engagement'
          }, {
            'name': 'Buba',
            'dept': 'Research'
          }, {
            'name': 'Kashif',
            'dept': 'Shared Research'
          }];
        }

      });
      var items = [{
        'name': 'Jack',
        'dept': 'Digital Engagement'
      }, {
        'name': 'Buba',
        'dept': 'Research'
      }, {
        'name': 'Kashif',
        'dept': 'Shared Research'
      }];

      function searchData() {
        var inputVal = document.getElementById('searchEmp').value.toLowerCase(),
          i, len, data, prop, matches = [],
          val;

        for (i = 0, len = items.length; i < len; i++) {
          data = items[i];
          for (prop in data) {
            if (data.hasOwnProperty(prop)) {
              val = data[prop];
              if (typeof val !== 'undefined' && val.toLowerCase && val.toLowerCase().indexOf(inputVal) >= 0) {
                // this data matches
                matches.push(data);
                break;
              }
            }
          }
        }
        showMatches(matches);
      }

      function showMatches(matches) {
        var elem = document.getElementById('result'),
          i, len, content = '';
        if (typeof matches === 'undefined' || !matches.length) {
          elem.innerHTML = '<i>No results found</i>';
          return;
        }
        for (i = 0, len = matches.length; i < len; i++) {
          content += '<div><b>Name:</b>' + matches[i].name + '</div>';
        }
        elem.innerHTML = content;
      }
    </script>
  </dom-module>
  <employee-list></employee-list>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <link rel="import" href="https://rawgit.com/Polymer/polymer/v1.2.2/polymer.html" />
  <script src="https://elements.polymer-project.org/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://elements.polymer-project.org/bower_components/iron-elements/iron-elements.html">

  <link rel="import" href="http://www.polymer-project.org/1.0/components/paper-input/paper-input.html">
  <link rel="import" href="http://www.polymer-project.org/1.0/components/paper-dropdown-menu/paper-dropdown-menu.html">
  <style>
    .taller {
      height: 120px;
    }

    [vertical-align="top"] ul {
      margin-top: 0;
    }

    [vertical-align="bottom"] ul {
      margin-bottom: 0;
    }

    button,
    paper-button {
      border: 1px solid #ccc;
      background-color: #eee;
      /*padding: 1em;*/
      border-radius: 3px;
      cursor: pointer;
    }

    button:focus {
      outline: none;
      border-color: blue;
    }
  </style>
</head>

<body>
  <dom-module id="employee-list">
    <template>
      <input type="text" id="searchEmp" placeholder="Search For employee" />
      <br/>
      <select>
        <option value="">Select Department</option>
        <option value="digital engamenet">Digital Engagement</option>
        <option value="shared research">Shared Research</option>
        <option value="research">Research</option>
      </select>
      <br/>
      <button onclick="javascript:searchData()">Search</button>
    </template>
    <div class="research-result">
      <div class="layout">
        <div class="layout__item u-1/4">
          <h3>Result</h3>
        </div>
      </div>
    </div>
    <div id="notFound" class="searchResult">
      <div class="layout">
        <div class="layout__item u-1">
          <p>No applicable NDA found for "{{filterValue}}"</p>
        </div>
        <div class="layout__item u-1/6">
          <a href="/rm-new-nda">
            <input type="button" id="create-new-nda" class="btn btn--primary" value="Request New NDA" />
          </a>
        </div>
      </div>
    </div>
    <div id="found" class="searchResult">
      <div class="layout">
        <div class="layout__item u-1">
          <p>Applicable NDA found for "{{filterValue}}". New NDA not required.</p>
        </div>
      </div>
    </div>
  </dom-module>
</body>

</html>