模糊查询（前端）

最新推荐文章于 2024-05-04 13:32:23 发布
最新推荐文章于 2024-05-04 13:32:23 发布
阅读量7.2k 收藏 14
点赞数 8
分类专栏： 笔记 文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49549509/article/details/120334293
版权

首先，模糊查询一般交由后台处理。
（数组对象的）
当然前端也可以实现，我这里的主要实现方式有两种，其一是使用fitler 过滤器：

ilter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
话不多说，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>模糊查询fitler</title>
</head>
<body>
    <div class="container">
        <div class="row">
        <div class="col-lg-6" style="margin:20px">
            <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">搜索</button>
            </span>
            <input type="text" v-model="text" class="form-control" placeholder="Search for...">
            </div>
        </div>
   
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>爱好</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,i) in searchResult" :key="i">
                    <td>{{i+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.hobby}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </tbody>
        </table>
    </div>
   <script>
                 var vm = new Vue({
              el:'.container',
              data:{
                text:'',
                info: [{
                  name: '雷森',
                  sex: '男',
                 hobby: '打篮球',
                  age: '18'
                },{
                  name: '刘伟',
                  sex: '男',
                 hobby: '旅游',
                  age: '24'
                },{
                  name: '刘微',
                  sex: '女',
                 hobby: '旅游',
                  age: '24'
                }, {
                 name: '胡汉三',
                  sex: '男',
                 hobby: '美食',
                  age: '30'
                }, {
                 name: '张艺',
                  sex: '女',
                 hobby: '看韩剧',
                  age: '24'
                }, {
                  name: '欧阳',
                  sex: '女',
                 hobby: '环游世界',
                  age: '25'
                }]
              },
              computed:{
                searchResult() {
                        if (this.text) {
                        // console.log(this.info)
                        return this.info.filter(
                            item =>
                            item.name.indexOf(this.text) > -1 ||
                            item.hobby.indexOf(this.ipt) > -1
                        );
                        } else {
                        return this.info;
                        }
                    }
                }
          })  

   </script>
</body>
</html>

其二是使用indexof（）方法，indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
定义一个新的空数组，对原数组遍历，用indexOf判断，不等一 -1，就push到新数组里，最后teturn 新数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>模糊查询</title>
</head>
<body>
    <div class="container">
        <div class="row">
        <div class="col-lg-6" style="margin:20px">
            <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">搜索</button>
            </span>
            <input type="text" v-model="text" class="form-control" placeholder="Search for...">
            </div>
        </div>
   
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>爱好</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,i) in searchResult" :key="i">
                    <td>{{i+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.hobby}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var vm = new Vue({
        el:'.container',
        data:{
          text:'',
          info: [{
            name: '雷森',
            sex: '男',
           hobby: '打篮球',
            age: '18'
          },{
            name: '刘伟',
            sex: '男',
           hobby: '旅游',
            age: '24'
          },{
            name: '刘微',
            sex: '女',
           hobby: '旅游',
            age: '24'
          }, {
           name: '胡汉三',
            sex: '男',
           hobby: '美食',
            age: '30'
          }, {
           name: '张艺',
            sex: '女',
           hobby: '看韩剧',
            age: '24'
          }, {
            name: '欧阳',
            sex: '女',
           hobby: '环游世界',
            age: '25'
          }]
        },
        computed:{
          searchResult() {
                  if (this.text) {
                  console.log(this.info)
                  return this.info.filter(
                      item =>
                      item.name.indexOf(this.text) > -1 ||
                      item.hobby.indexOf(this.ipt) > -1
                  );
                  } else {
                  return this.info;
                  }
              }
          }
    })  

</script> 
</body>

</html>
牛牪犇0
关注
  • 8
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
纯前端！超简单！实现查询功能
weixin_45928161的博客
05-08 2796
然后，对于每个文章对象，使用toLowerCase函数将content属性转换为小写字母，使用includes函数判断是否包含selectContent，如果是，则将该对象添加到articlesShow数组中。曾经一无所知的我手撸过一次纯前端的模糊查询功能，当时绞劲脑汁做出来，还颇有成就感，如今回头看就是纯小丑！方法接受一个函数作为参数，该函数用于测试每个数组元素是否符合指定的条件。方法来过滤一个数组中不需要的元素，返回一个新的数组。方法过滤出其中的偶数，最终得到了一个新的数组。
纯前端实现增-删-改-查(模糊查询)和分页[本地存储当成数据库(vue + element)]
weixin_42386379的博客
02-11 8091
纯前端实现增-删-改-查(模糊查询)和分页[本地存储当成数据库(vue + element)]
50个前端实战项目之05：模糊加载效果。
最新发布
前端开发博客
05-04 1007
大家好，我是宝哥。今天讲50个前端实战项目之05：模糊加载效果。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/blurry-loading前端实战项目系列正在更新：05/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件05：模糊加载效果项目介绍本项目模拟了网页加载过程中的模糊加载效果。页...
vue-前端实现模糊查询
low666的博客
11-06 886
开始觉得前端的模糊查询肯定是非常难实现的，但后来发现还是很容易的，几行代码就可以搞定。
vue纯前端实现模糊查询，使用filter和indexOf
weixin_43312391的博客
03-15 9266
实现目标：在输入框中输入与名称有关的内容，出现与所输入内容有关的表信息。 实现效果： 实现方式： template中： <div class="search-box"> <el-input placeholder="请输入名称" v-model="inputVal" clearable size="small" ></el-inp
前端Js实现模糊查询
flhhly的博客
07-14 2145
前端Js实现字符串的模糊查询
MySQL中如何高效的实现模糊查询（附30条优化建议）
m0_71777195的博客
03-30 8593
然 而，如果在编译时建立访问计划，变量的值还是未知的，因而无法作为索引选择的输入项。14、并不是所有索引对查询都有效，SQL是根据表中数据来进行查询优化的，当索引列有大量数据重复时，SQL查询可能不会去利用索引，如一表中有字段 sex，male、female几乎各一半，那么即使在sex上建了索引也对查询效率起不了作用。在使用msyql进行模糊查询的时候，很自然的会用到like语句，通常情况下，在数据量小的时候，不容易看出查询的效率，但在数据量达到百万级，千万级的时候，查询的效率就很容易显现出来。
前台select框模糊查询方法
12-05
在前端开发中，"select框模糊查询方法"是一种常见的用户交互功能，允许用户在下拉选择框中输入关键字，快速找到并选择匹配项。这样的功能极大地提升了用户体验，尤其是在选项众多时，用户不再需要逐个滚动查找，而是...
Jeecg前端输入框输入信息实现模糊查询
12-14
在本文中，我们将探讨如何在Jeecg前端项目中实现输入框的模糊查询功能，以满足用户在输入部分关键词后就能查找匹配数据的需求。Jeecg是一款基于代码生成器的快速开发框架，它极大地简化了前后端开发流程。在本案例中...
zTree模糊查询Demo
06-01
在本案例中，我们将深入探讨"zTree模糊查询Demo"，它实现了动态搜索功能，可以高效地帮助用户查找并高亮显示符合搜索条件的节点，同时隐藏那些不匹配的节点。 模糊查询是用户输入关键词后，系统能够返回包含这些...
MyBatis-plus 模糊查询的使用
09-07
在实际开发中，模糊查询是一种常见的查询方式，用于查找包含特定字符或模式的数据。MyBatis-plus提供了简单易用的模糊查询功能。 在MyBatis-plus中，模糊查询主要通过`QueryWrapper`类来实现。`QueryWrapper`是一个...
《前端实现js模糊查询关键字显示下拉框功能的实例教程》源码
04-16
本文件属于文章《前端实现js模糊查询关键字显示下拉框功能的实例教程》的完整代码，在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在开发中直接使用。
vue实现Input输入框模糊查询方法
12-13
本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码，供大家参考，具体内容如下 原理：原生js的indexOf() 方法，该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或...
Java实战：SpringBoot+ElasticSearch 实现模糊查询
oandy0的博客
03-08 2272
本文将详细介绍如何使用SpringBoot整合ElasticSearch，实现模糊查询、批量CRUD、排序、分页和高亮功能。我们将深入探讨ElasticSearch的相关概念和技术细节，以及如何使用SpringData Elasticsearch库简化开发过程。
前端实现模糊查询
weixin_45680024的博客
09-11 1461
前端实现关键字模糊查询记录 test方法 代码展示： const reg = new RegExp(关键字); //输入关键字 const data=['steven','mike','alice'] for (let index = 0; index < data.length; index++) { if (reg.test(data[index])) { return data[index] //返回满足条件的数据 } IndexOf
前端实现模糊查询不区分大小写
weixin_43196880的博客
10-12 2154
js使用es6实现模糊搜索（不区分大小写）
前端模糊查询
weixin_44542401的博客
06-01 1513
今天学习一个模糊查询的方法。以前是思维太固定了，使用的模糊查询都是后端调用方法，然后又要写sql语句，而今天学习到是它就在前端进行模糊查询。思想大概是：后端查询总的数据给到前端的俩个容器，一个容器再拜（容器1）是主容器负责 展示数据，另一个容器（容器2）是用来装模糊查询出来的数据，然后把容器2的数据赋给容器1。 具体操作如下： 前端我用的是element，根据element的特性v-model具有双向绑定的作用， <el-input placeholder="请输入内容" v-model="s
前端的模糊匹配
“创造之”的博客
08-09 2309
字符串方法indexOf var len = list.length; var arr = []; for(var i=0;i&lt;len;i++){ //如果字符串中不包含目标字符会返回-1 if(list[i].indexOf(keyWord)&gt;=0){ arr.push(list[i]); } } return arr; 正则表达式 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值