create polymer custom element using paper-listbox with filter - polymer-1.0

Question

I would like to create custom elements in Polymer using paper-listbox with filter (search). Started with the code below. however, some thing is not correct with this code. Need help on this
<dom-module id="employee-list">
<template >
<paper-input on-change="Filter" floatingLabel id="searchEmployee"></paper-input>
<paper-listbox class="dropdown-content">
<template is="dom-repeat" items="[[getActiveEmployees]]" flex>
<paper-item value="[[item.EmployeeCode]]" class="dropdown-item">[[item.EmployeeName]]</paper-item>
</template>
</paper-listbox>
</template>
<script>
Polymer({
is: 'employee-list',
properties: {
getActiveEmployees: {
type: Array,
value: [],
notify: true
},
filterValue: {
type: String,
notify:true
}
},
ready: function () {
this.getActiveEmployees = GetActiveEmployeeList();
},
Filter: function(val) {
alert(JSON.stringify(val));
return function (person) {
if (!this.filterValue) return true;
if (!person) return false;
return (person.CompanyName && ~person.CompanyName.toLowerCase().indexOf(val.toLowerCase()));
};
}
});
</script>

Answer 1

Bind the input value to filterValue and use Filter in the dom-repeat
<paper-input value="{{filterValue}}" floatingLabel id="searchEmployee"></paper-input>
<template is="dom-repeat" items="[[getActiveEmployees]]" flex filter="Filter">

Answer 2

Here is the updated code and its working as expected.
<dom-module id="employee-list">
<template>
<paper-input value="{{filterValue}}" label="Search Employee Code Or Name" floatingLabel id="searchEmployee"></paper-input>
<paper-listbox >
<template is="dom-repeat" items="[[getActiveEmployees]]" flex filter="{{Filter(filterValue)}}">
<div class="row">
<div class="col-sm-12" style="font-size:15px;font-family:'Open Sans'">
{{item.employeeNumber}} - {{item.employeeName}}
</div>
<hr />
</div>
</template>
</paper-listbox>
</template>
<script>
Polymer({
is: 'employee-list',
properties: {
getActiveEmployees: {
type: Array,
value: [],
notify: true
},
filterValue: {
type: String,
notify:true
},
items: {
type: Array,
notify: true,
value: function () { return []; }
}
},
ready: function () {
this.getActiveEmployees = GetActiveEmployeeList();
},
Filter: function (val) {
return function (person) {
if (!person) return false;
if (val != null || val != undefined) {
return (person.employeeNumber && ~person.employeeNumber.toLowerCase().indexOf(val.toLowerCase())) ||
(person.employeeName && ~person.employeeName.toLowerCase().indexOf(val.toLowerCase()));
}
else
return true;
};
}
});
</script>