前端js实现模糊搜索

最新推荐文章于 2025-06-16 08:23:19 发布

CrayonJ

最新推荐文章于 2025-06-16 08:23:19 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.csdn.net/Crayon111/article/details/121704210

该博客介绍了一种在JavaScript中使用JSON.stringify()方法和字符串search()函数来过滤数组元素的技巧。通过监听输入框的输入值，遍历原始数据并进行模糊匹配，将匹配到的项添加到新的列表中，实现动态筛选功能。这种方法适用于前端开发中的数据检索场景。

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

思路：
1.遍历数组 list.foreach()
2.将遍历出来的item进行字符串转换 JSON.stringify(item)
3.在转换后的字符串通过search方法进行模糊搜索 str.search( value )
4.如果search到该字段的话则将该item塞入数组 newlist.push(item)

完整代码

<uni-search-bar v-model="list" @input="input()" placeholder="">

data() {
	oldList: [ {
		name: '小明',
		age: 10,
		gender: '男'
	}，{
		name: '小红',
		age: 13,
		gender: '女'
	}，{
		name: '大明',
		age: 18,
		gender: '男'
	}， {
		name: '红',
		age: 16,
		gender: '女'
	}],
	List: {}
}

methods: {
	// 监听获取到输入框输入的val值
	input( val ) {
		this.List = []
		this.oldList.forEach( item => {
          if ( JSON.stringify( item ).search( val ) != -1 ) {
            this.List.push( item )
          }
        } )
	}
}