Polymer 3.0通话日志组件实现实时搜索过滤功能求助

实现思路 #

1. 新增响应式属性存储数据 #

你需要额外存2份数据：一份是拉取到的原始全量通话记录，避免过滤后丢失原始数据；另一份是过滤后的结果，专门用于列表渲染。修改properties配置如下：

static get properties() {
    return {
        // 保留原有属性，新增以下2个
        originalCalls: {
            type: Array,
            value() {
                return []
            }
        },
        filteredCalls: {
            type: Array,
            value() {
                return []
            }
        },
        // 原有属性不变
        calls: {
            type: Array,
            value() {
                return []
            },
        },
        searchTimeout: {
            type: Object,
        },
        language: {
            type: String,
            value: 'de-DE',
        },
        loading: {
            type: Boolean,
            observer: '_showLoading',
        },
        userInput: {
            type: String,
            value: '',
        },
    }
}

2. 调整数据初始化逻辑 #

你原本拉取通话数据成功的回调中，同时给原始数据和过滤数据赋值，注意要用Polymer的set方法触发响应式更新：

// 示例：你的数据拉取成功回调里
ajaxRequest(你的请求参数).then(res => {
    this.set('originalCalls', res)
    this.set('filteredCalls', [...res])
    // 你原有其他赋值逻辑保留
})

3. 改写搜索方法，增加防抖+模糊匹配逻辑 #

输入时加300ms防抖，避免频繁触发过滤影响性能，匹配逻辑默认不区分大小写，你可以根据自己call对象的实际字段调整匹配范围：

_searchCalls() {
    const userInput = this._getSearchInput().trim().toLowerCase()
    // 防抖逻辑：输入间隔300ms再执行过滤
    clearTimeout(this.searchTimeout)
    this.searchTimeout = setTimeout(() => {
        // 输入为空时直接返回全量数据
        if (!userInput) {
            this.set('filteredCalls', [...this.originalCalls])
            return
        }
        // 过滤匹配逻辑，可根据你的call字段调整，示例匹配来电人、手机号两个字段
        const filtered = this.originalCalls.filter(call => {
            return call.caller?.toLowerCase().includes(userInput) 
                || call.phoneNumber?.toLowerCase().includes(userInput)
                // 要加其他匹配字段直接往下加||条件即可
        })
        this.set('filteredCalls', filtered)
    }, 300)
}

4. 调整模板绑定 #

把渲染列表和计数的绑定从原有的calls改成filteredCalls：

<!-- 搜索框占位符里的计数修改 -->
<input on-input="_searchCalls" 
value="{{userInput::input}}"
type="search" 
id="inputField" 
placeholder="[[_computeText('Searchbar', 'placeholder')]] ({{_countCalls(filteredCalls)}} [[_computeText('Searchbar', 'entries')]])">

<!-- dom-repeat绑定修改 -->
<template is="dom-repeat" items="{{filteredCalls}}" as="call" observe="call.length">
    <div id="row" class$="row {{_showCall()}}">
        <call-entry data="[[call]]" language="[[language]]"></call-entry>
    </div>
</template>

5. 可选：优化重置按钮逻辑 #

你现有的红色按钮点击方法_getCalls可以改成清空搜索、重置列表的逻辑：

_getCalls() {
    this.set('userInput', '')
    this.set('filteredCalls', [...this.originalCalls])
}

内容的提问来源于stack exchange，提问作者JohnJonta