前端模糊搜索

-橘子

已于 2022-10-21 10:54:03 修改

阅读量552

点赞数

分类专栏：笔记文章标签：前端 javascript vue.js

于 2022-02-11 14:35:00 首次发布

本文链接：https://blog.csdn.net/m0_48850082/article/details/122879877

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在JavaScript中利用indexOf方法进行模糊搜索，当在对象数组中根据输入的关键词筛选元素时，如果找到匹配项，返回其索引，否则返回-1。示例代码展示了在Vue.js环境中，结合el-input和el-checkbox组件，动态过滤headerList数组并显示结果。

摘要由CSDN通过智能技术生成

根据输入字符从对象数组中筛选，模糊搜索，

indexOf() 如果查询到返回索引，反之返回-1

代码如下

html代码

      <div class="left-box">
        <div class="search-box">
          <el-input size="small" class="search-input" placeholder="请输入关键词" v-model="searchKey">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>

        <div class="checks-box">
          <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="(item, index) in searchL" :key="index" :label="item.column_comment"></el-checkbox>
            <el-checkbox v-for="(it, idx) in defaultList" :key="idx + headerList.length" :label="it.column_comment" disabled></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

js代码

  computed: {
    searchL() {
      let that = this
      if (that.searchKey) {
        return that.headerList.filter(item => item.column_comment.indexOf(that.searchKey) > -1)
      } else {
        return that.headerList
      }
    }
  }