前端VUE---JS实现数据的模糊搜索

实现背景

因为后端实现人员列表返回，每次返回的数据量在100以内，要求前端自己进行模糊搜索

页面实现

因为是实时更新数据的，就不需要搜索和重置按钮了

代码

HTML

     <el-dialogtitle="团队人员详情":visible.sync="centerDialogVisible"width="30%"center:close-on-click-modal="false"><el-row :gutter="20"><el-col :span="10"><el-input v-model="keyword" placeholder="请输入姓名或身份证查询"></el-input></el-col></el-row><el-table :data="filteredItems" height="350"><el-table-column property="name" label="姓名" align="center"></el-table-column><el-table-column property="idCard" label="身份证" align="center"></el-table- column></el-table><span slot="footer" class="dialog-footer"><el-button type="primary" @click="centerDialogVisible = false">确 定</el-button></span></el-dialog>

js

 // 计算属性computed: {filteredItems() {// if (!this.keyword) {//   return this.userList// }return this.userList.filter(item =>{return item.idCard.includes(this.keyword) || item.name.includes(this.keyword)});}},

效果

 

注意点1：我在data中定义keyword时候第一次使用的是默认值  undefined  导致includes出来的结果是空。

注意点2：我在返回数据中定义的身份证号是number类型，在计算时候直接报错为类型错误，不能使用includes函数。需要转换为字符串类型

computed的实现方式很简洁，主要借助一个计算属性，在计算属性中通过搜索关键词过滤原始列表数据得到新的数据列表，并将新数据列表渲染到页面。

值得注意的地方：
abc.indexOf('a')的返回值是0，而abc.indexOf('')的返回值也是0。

因此，在一开始没有输入任何数据的时候，计算属性列表filterFruitList中经过计算得到的数据和原始列表数据fruitList是一样的。

这里最重要的是没有对原来的数据进行修改和删除

也可以使用watch监听数据变化

GPT提供的方法

在Vue2中，你可以按照以下步骤实现后端返回的带有姓名和身份证信息的List进行展示，并添加静态模糊搜索和搜索重置功能。

首先，在Vue组件中定义需要的数据变量：

data() {return {userList: [],    // 存储后端返回的列表数据keyword: '',     // 存储搜索关键字filteredList: [] // 存储搜索结果数据};
}

然后，使用生命周期钩子函数 mounted() 在组件加载时获取后端数据：

mounted() {// 调用后端API获取数据（示例）yourApi.getUserList().then(response => {this.userList = response.data;});
}

在模板中，你可以使用一个输入框和一个搜索按钮以及一个重置按钮：

<input type="text" v-model="keyword" placeholder="请输入搜索关键字">
<button @click="search">搜索</button>
<button @click="reset">重置</button>

接下来，在Vue组件中实现静态模糊搜索和搜索重置功能的两个方法：

methods: {search() {if (this.keyword.trim() === '') {this.filteredList = this.userList;} else {const keywordLowerCase = this.keyword.toLowerCase();this.filteredList = this.userList.filter(user => {const nameMatch = user.name.toLowerCase().includes(keywordLowerCase);const idCardMatch = user.idCard.toLowerCase().includes(keywordLowerCase);return nameMatch || idCardMatch;});}},reset() {this.keyword = '';this.filteredList = this.userList;}
}

在 `search` 方法中，首先判断关键字是否为空，如果为空则直接将 `filteredList` 设置为原始列表数据 `userList`，否则根据关键字对 `userList` 进行静态模糊搜索，并将结果赋值给 `filteredList`。

在 `reset` 方法中，将关键字重置为空字符串，并将 `filteredList` 设置为原始列表数据 `userList`。

最后，在模板中使用 `v-for` 遍历 `filteredList`，展示搜索结果：

<ul><li v-for="user in filteredList" :key="user.id">{{ user.name }} - {{ user.idCard }}</li>
</ul>

综上所述，你可以按照以上步骤，使用Vue2实现后端返回的列表数据的展示，并添加静态模糊搜索和搜索重置功能。