前端实现页内搜索

最新推荐文章于 2023-09-27 14:53:14 发布

喜欢吃青椒吗

最新推荐文章于 2023-09-27 14:53:14 发布

阅读量738

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 笔记 / BUG

本文链接：https://blog.youkuaiyun.com/zhongjunhaoz/article/details/109092014

笔记 / BUG 同时被 2 个专栏收录

50 篇文章

订阅专栏

JavaScript

20 篇文章

订阅专栏

这篇博客主要介绍了如何在前端实现表格数据的页内搜索功能。通过用户输入的关键字，利用JavaScript的filter方法筛选出包含关键字的表格行，并实时更新显示在页面上，从而提供便捷的数据查找体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里要讲清楚，搜索的是什么？页内搜索并不是ctrl+ f 这种搜索，它搜索的范围肯定是从后端拿到数据渲染在前端的数据，比如表格，列表等等。

这里以表格为例，要实现填入关键字，然后筛选出对应的表格，展示在页面上。

<el-input placeholder="搜索" v-model="value">
   <el-button slot="append" type="primary" icon="h-icon-search" @click="doSearch(value)"></el-button>
 </el-input>

data() {
	value: ''
}

methods: {
	doSearch(value) {
		let a = [];
		a.push(
	...this.branchOffice.filter(item => item.branch.indexOf(value) > 	 -1),...this.branchOffice.filter(item => item.delayNum == value)		
)
this.branchOffice = a;
	}
}

思路：
this.branchOffice.filter(item => item.branch.index(value)) //this.branchOffice为页面绑定的表格data
//再利用filter方法筛选，item.brach.indexOf(value)是用来判断branch是否含有value。
//a.push(...arra,...arrb) 这是用来拼接数组
//this.branchOffice = a 则用来渲染数据到页面