Polymer 1.0 使用带过滤器的纸质列表框创建聚合物自定义元素

我想使用带过滤器的纸质列表框（搜索）在聚合物中创建自定义元素。从下面的代码开始。但是，这段代码有一些地方不正确。需要帮忙吗

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

[[item.EmployeeName]]
聚合物({
是‘员工名单’，
特性：{
getActiveEmployees：{
类型：数组，
值：[]，
通知：正确
},
filterValue：{
类型：字符串，
通知：正确
}
},
就绪：函数（）{
this.getActiveEmployees=GetActiveEmployeeList（）；
},
过滤器：功能（val）{
警报（JSON.stringify（val））；
返回函数（人）{
如果（！this.filterValue）返回true；
如果（！person）返回false；
return（person.CompanyName&&~person.CompanyName.toLowerCase（）.indexOf（val.toLowerCase（））；
};
}
});

---

将输入值绑定到

filterValue

并在

dom repeat

中使用

Filter

<paper-input value="{{filterValue}}"  floatingLabel id="searchEmployee"></paper-input>

<template is="dom-repeat" items="[[getActiveEmployees]]" flex filter="Filter">

---

以下是更新后的代码及其预期工作情况

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

{{item.employeeNumber}-{{item.employeeName}

聚合物({
是‘员工名单’，
特性：{
getActiveEmployees：{
类型：数组，
值：[]，
通知：正确
},
filterValue：{
类型：字符串，
通知：正确
},
项目：{
类型：数组，
通知：正确，
值：函数（）{return[]；}
}
},
就绪：函数（）{
this.getActiveEmployees=GetActiveEmployeeList（）；
},
过滤器：功能（val）{
返回函数（人）{
如果（！person）返回false；
如果（val！=null | | val！=未定义）{
return（person.employeeNumber&&~person.employeeNumber.toLowerCase（）.indexOf（val.toLowerCase（））||
（person.employeeName&&~person.employeeName.toLowerCase（）.indexOf（val.toLowerCase（））；
}
其他的
返回true；
};
}
});

---

使用

dom repeat

时，单向绑定并不总是适用于我，请尝试

{…}

而不是

[[…]

，直到该功能按预期工作。您可以稍后尝试将其更改回。感谢您的更正，并使其正确无误，并将在回答问题时更新代码。