前端自定义模糊搜索

最新推荐文章于 2024-11-15 14:43:45 发布

原创最新推荐文章于 2024-11-15 14:43:45 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

功能专栏收录该内容

13 篇文章

订阅专栏

这段代码展示了如何实现搜索框实时匹配功能。当输入值存在时，它使用filter方法筛选数组，通过比较输入值与数组元素的organizenm属性是否包含匹配项，优化后的代码更加简洁。注意数据需先做拷贝处理，且拷贝不应在函数内部完成。

关键代码

//搜索框一输入就进行相关的匹配搜索
searchDepartment() {
    //当搜索框中存在值
    if(this.department) {
        this.departments = this.departmentsCopy.filter(item => {
            if(!!~item.organizenm.indexOf(this.department) || !!~item.organizenm.toUpperCase().indexOf(this.department.toUpperCase())) {
                return true
            }
        })
    } else {
        this.departments = this.departmentsCopy
    }
}

代码优化

//搜索框一输入就进行相关的匹配搜索
searchDepartment() {
    //当搜索框中存在值
    if(this.department) {
        this.departments = this.departmentsCopy.filter(item => 
			return item.organizenm.indexOf(this.department) > -1 || item.organizenm.toUpperCase().indexOf(this.department.toUpperCase() > -1
        })
    } else {
        this.departments = this.departmentsCopy
    }
}