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

实现背景

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

页面实现

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

代码

HTML

                                                                                                           确 定              

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;  });}

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

搜索重置

接下来，在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`，展示搜索结果：

 
•     {{ user.name }} - {{ user.idCard }} 

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