vue和js中如何实现模糊查询

叁歲伎倆 2022-11-06 15:00 251阅读 0赞

先来看效果图  
![在这里插入图片描述][2021031011461693.gif]  
这种数据量少的场景适用于前端实现模糊查询  
如何实现？

<template>
      <div class="container">
        <div class="search-bar">
          <el-input v-model="inputVal" placeholder="请输入图标名称" suffix-icon="el-icon-search" clearable></el-input>
        </div>
        <div class="icon-contain">
          <div class="icon-item" v-for="item in searchList" :key="item.icon">
            <i class="icon-style" :class="item.icon"></i>
            <span class="icon-name">{
       { item.name }}</span>
          </div>
        </div>
      </div>
    </template>

js部分

<script>
    export default { 
      data () { 
        return { 
          inputVal: '',
          list: [], // 全部图标列表
        }
      },
      created() { 
        this.loadData()
      },
      computed: { 
        searchList () { 
          ....
        }
      },
      methods: { 
        loadData() {  // 初始化数据
          this.list = [
            {  icon: 'el-icon-delete', name: 'el-icon-delete' },
            {  icon: 'el-icon-setting', name: 'el-icon-setting' },
            {  icon: 'el-icon-user', name: 'el-icon-user' },
            {  icon: 'el-icon-star-off', name: 'el-icon-star-off' },
            {  icon: 'el-icon-picture-outline', name: 'el-icon-picture-outline' },
            {  icon: 'el-icon-s-custom', name: 'el-icon-s-custom' },
            {  icon: 'el-icon-edit', name: 'el-icon-edit' },
            {  icon: 'el-icon-folder-opened', name: 'el-icon-folder-opened' },
            {  icon: 'el-icon-chat-dot-round', name: 'el-icon-chat-dot-round' },
            {  icon: 'el-icon-upload', name: 'el-icon-upload' },
            {  icon: 'el-icon-message-solid', name: 'el-icon-message-solid' }
          ]
        },
      }
    }
    </script>

我们用 `computed` 计算属性来动态获得图标列表数据  
想要达到的功能是：输入框输入内容，列表框能动态根据输入值显示输入值相关的列表，即模糊查询

**方法1**：使用 `filter()` 和 `includes()` 实现

computed: { 
        searchList () { 
          if (!this.inputVal) { 
            return this.list
          }
          return this.list.filter(item => { 
          	return item.name.includes(this.inputVal)
          })
          return data
        }
      },

**方法2**：使用 `indexOf()` 实现，（涉及到英文字母的还是建议处理一下大小写问题）

computed: { 
        searchList () { 
          if (!this.inputVal) { 
            return this.list
          }
          const data = []
          this.list.forEach(item => { 
            if (item.name.toLowerCase().indexOf(this.inputVal.toLowerCase()) !== -1) { 
              data.push(item)
            }
          })
          return data
        }
      },

**方法3**：使用 `test()` 正则匹配实现

> 语法：RegExp.test(string) ，string 要检测的字符串  
> 该方法用于检测一个字符串是否匹配某个模式，如果匹配返回 true ，否则返回 false

computed: { 
        searchList () { 
          if (!this.inputVal) { 
            return this.list
          }
          const data = []
          const reg = new RegExp(this.inputVal.toLowerCase())
          this.list.forEach(item => { 
            if (reg.test(item.name.toLowerCase())) { 
              data.push(item)
            }
          })
          return data
        }
      },

还有其他的方法，如 `split()`、`match()` 等

[2021031011461693.gif]: /images/20221023/b079a1b7d9d64a0ab13944f7f9d63a79.png

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关 MySQL如何不用like+%实现模糊查询

一、前言我们都知道 InnoDB 在模糊查询数据时使用 "%xx" 会导致索引失效，但有时需求就是如此，类似这样的需求还有很多，例如，搜索引擎需要根基用户数据的关键字进

清疚/ 2023年10月03日 00:15/ 0 赞/ 33 阅读

相关 vue中input输入框的模糊查询实现

　　本套餐将包括两个重磅性的课程与一个赠送学习的课程，分别为SpringBoot实战视频教程与RabbitMQ实战教程跟SSM整合开发之poi导入导出Excel。目的是为了让各

短命女/ 2023年09月25日 12:11/ 0 赞/ 21 阅读

相关【皮皮哥资源网】JS如何实现模糊查询模糊查询-键盘事件-关键字搜索

所谓模糊查询就是列表中的数据是否有符合关键字或某个字符。实现的操作方法主要有两种： 1.字符串方法indexOf：代码如下： var list = [

﹏ヽ暗。殇╰゛Y/ 2023年02月18日 03:04/ 0 赞/ 190 阅读

相关 php order by 模糊查询,在Angular中如何实现orderBy排序与模糊查询

这篇文章主要介绍了Angular实现的内置过滤器orderBy排序与模糊查询功能,涉及AngularJS过滤器、排序及字符串遍历、查询等相关操作技巧,需要的朋友可以参考下本

╰+攻爆jí腚メ/ 2023年01月14日 04:52/ 0 赞/ 153 阅读

相关 php框架如何用模糊查询,如何在thinkphp中利用like实现一个模糊查询功能

如何在thinkphp中利用like实现一个模糊查询功能发布时间：2020-12-11 16:53:49 来源：亿速云阅读：85 作者：Leah 如何在think

朴灿烈づ我的快乐病毒、/ 2022年11月17日 03:43/ 0 赞/ 152 阅读

相关 vue和js中如何实现模糊查询

先来看效果图 ![在这里插入图片描述][2021031011461693.gif] 这种数据量少的场景适用于前端实现模糊查询如何实现？ <templat

叁歲伎倆/ 2022年11月06日 15:00/ 0 赞/ 252 阅读

相关 ES中如何实现like模糊查询

问题描述：我们都知道ES针对复杂的多添加组合查询非常强大，也知道通过match可以实现全文检索查询（分词查询），但是如果现在我只需要实现类似mysql中的like全匹配

偏执的太偏执、/ 2022年09月02日 08:11/ 0 赞/ 347 阅读

相关 vue中实现“模糊搜索”

<template> <div> <div> <el-input v-model="search

﹏ヽ暗。殇╰゛Y/ 2022年04月22日 01:02/ 0 赞/ 359 阅读

相关 js 模糊查询（fuzzy search）

这儿是stackoverflow上的一段代码，这是实现模糊查询的核心： var names = \["Bob Hope","James Jones","Steve Jobs"

你的名字/ 2022年01月09日 06:21/ 0 赞/ 639 阅读

相关（二三）ArcGIS JS QueryTask和FindTask实现模糊查询

queryTask实现模糊查询： query.where="字段 like %"+"'某一个值+'"%'";//模糊查询 require([

雨点打透心脏的1/2处/ 2021年09月18日 08:32/ 0 赞/ 821 阅读