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

实现背景

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

页面实现

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

代码

HTML

     <el-dialog
        title="团队人员详情"
        :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实现后端返回的列表数据的展示，并添加静态模糊搜索和搜索重置功能。